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/

Compartilhar nas redes sociais:Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Email this to someone
email

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.