¿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.

— Isherwood
fuente

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

57

Puedes usar CSS white-space Propertypara lograr esto.

white-space: nowrap

— Robert C. Barth
fuente

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