CSS: ¿cómo evitar que el texto ocupe más de 1 línea?

Question

¿Hay un ajuste de palabras o cualquier otro atributo que impida que el texto se ajuste? Tengo una altura, y overflow:hidden, y el texto aún se rompe.

Tiene que funcionar en todos los navegadores, antes de CSS3.

Answer 1

div { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div>test that doesn't wrap</div>

Nota: esto sólo funciona en elementos de bloque. Si necesita hacer esto en las celdas de la tabla (por ejemplo), debe colocar un div dentro de la celda de la tabla ya que las celdas de la tabla tienen la celda de tabla de la tabla sin bloque.

A partir de CSS3, esto también es compatible con celdas de tabla.

Answer 2

A veces el uso de   en lugar de espacios funcionará. Claramente tiene inconvenientes, sin embargo.

Answer 3

Puede usar CSS white-space Property para lograrlo.

white-space: nowrap 

Answer 4

Usando ellipsis agregará ... al final.

<style type="text/css"> 
    div { 
     white-space: nowrap; 
     overflow: hidden; 
text-overflow: ellipsis; 
    } 
    </style>