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

332

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

Necesita funcionar en todos los navegadores, antes de CSS3.

html css text word-wrap Isherwood
fuente

Respuestas:

632 

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>
Expandir fragmento

Nota: esto solo 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 muestran que la celda de la tabla no se bloquea.

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

cletus
fuente
12
espacio en blanco! Eso es lo que he estado buscando ... 1,000 gracias ... ¡esto es imposible para googlear!
2
También hay un atributo propietario, es decir, word-wrap (IIRC) ... estúpido IE.
Garrow
21
Considere también "desbordamiento de texto: puntos suspensivos"; Agrega el ... al final de su texto si sale de los límites del ancho de su contenedor
Drew Landgrave
1
Creo que el comentario "esto solo funciona en elementos de bloque" es correcto. Si intenta esto en un ancla, párrafo, encabezado, etc., esto no funciona. Necesitas hacer algo comop.oneline { white-space:nowrap; overflow:hidden; display:block;}
Alex Angelico
Cuidado con el desbordamiento oculto; Significa negocios.
David A. Gray
36

El uso de puntos suspensivos agregará el ... al final.

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

A veces, usar en &nbsp;lugar de espacios funcionará. Claramente tiene inconvenientes, sin embargo.

Grossvogel
fuente
Desafortunadamente, no puedo hacerlo en esta circunstancia
2

Solo para ser claro como el cristal, esto funciona bien con párrafos y encabezados, etc. Solo necesita especificar display: block.

Por ejemplo:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(perdona los estilos en línea)

Duncan Jones
fuente