suspensivos - truncar texto css varias lineas

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

Question

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

Necesita funcionar en todos los navegadores, antes de CSS3.

Answer 1

A veces utilizando   En lugar de espacios funcionará. Claramente tiene inconvenientes, sin embargo.

Answer 2

Puede utilizar la CSS white-space Property para lograr esto.

white-space: nowrap

Answer 3

Usando elipsis agregará el ... en el último.

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

Answer 4

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

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

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 tienen la celda de la tabla de visualización no bloqueada.

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