Às vezes você vai querer ter blocos curtos de texto que sempre fiquem na mesma linha. É fácil evitar quebras de linha para elementos específicos usando a propriedade “white-space” do CSS:
span.nobreak {
white-space: nowrap;
}
E você pode deixar ainda melhor em alguns casos, ocultando qualquer texto que passe do limite da linha e adicionando reticências:
span.nobreak {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Esse é um artigo traduzido de https://alligator.io/css/prevent-line-break/