Evitando quebras de linha usando CSS

À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/

Leave a Comment.