desbordamiento de CSS - solo 1 línea de texto

134

Tengo divcon el siguiente estilo CSS:

width:335px; float:left; overflow:hidden; padding-left:5px;

Cuando inserto, en eso div, una larga línea de texto, se está rompiendo en una nueva línea y muestra todo el texto. Lo que quiero es tener solo una línea de texto que no se rompa. Cuando el texto es largo, quiero que este texto desbordado desaparezca.

Estaba pensando en establecer la altura, pero parece estar mal.

¿Tal vez si agrego altura que es la misma que la fuente, debería funcionar y no causar ningún problema en diferentes navegadores?

¿Cómo puedo hacer eso?

html css overflow

— carrera
fuente

¿Puedes demostrar tu problema en jsFiddle ?

— Harry Joy

352

Si desea restringirlo a una línea, utilícelo white-space: nowrap;en el div.

— Septnuits
fuente

Pero luego no muestra los puntos suspensivos si el texto va más allá de la dimensión especificada. stackoverflow.com/questions/26342411/…

— SearchForKnowledge

Funciona genial. Pero necesito ...si hay más caracteres para mostrar porque cuando la longitud de la línea es larga y se sale del div escrito.

— Moshii

Esto actúa de forma extraña si el texto oculto contiene hipervínculos. Si tuviera que pasar por la página, el enlace en el texto oculto se desplazaría a la pantalla, cuando debería estar oculto.

— Eric

76

Si desea indicar que todavía hay más contenido disponible en ese div, probablemente quiera mostrar los "puntos suspensivos":

text-overflow: ellipsis;

Esto debería ser adicional a lo white-space: nowrap;sugerido por Septnuits.

Además, asegúrese de revisar este hilo para manejar esto en Firefox.

— Mouli
fuente

47

Creo que se debe utilizar text-overflow: ellipsis;con overflow: hidden;y white-space: nowrap;para hacer que funcione

— Francisco Costa

caniuse.com/#feat=text-overflow aka. sí tu puedes. Considere poner todo el contenido en el atributo de título, para que el usuario aún tenga acceso a él.

— DanMan

el mío solo se muestra en una línea y no llena el DIV antes de mostrar los puntos suspensivos ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

43

Puedes usar este código CSS:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

La propiedad de desbordamiento de texto en CSS trata situaciones en las que el texto se recorta cuando desborda el cuadro del elemento. Se puede recortar (es decir, cortar, ocultar), mostrar puntos suspensivos ('...', Valor de rango Unicode U + 2026).

Tenga en cuenta que el desbordamiento de texto solo ocurre cuando la propiedad de desbordamiento del contenedor tiene el valor oculto , desplazamiento o automático y espacio en blanco: nowrap; .

El desbordamiento de texto solo puede ocurrir en elementos de nivel de bloque o de bloque en línea , porque el elemento debe tener un ancho para desbordarse. El desbordamiento ocurre en la dirección determinada por la propiedad de dirección o los atributos relacionados.

— Gaurav Tripathi
fuente

6

El mejor código para UX y UI es

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

— Omid Ahmadyani
fuente

0

si además, por favor, si tiene un texto largo, puede utilizar este código CSS a continuación;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

Hacer visible todo el texto de la línea.

— shafii muhudi
fuente

0

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Defina el ancho también para establecer el desbordamiento en una línea

— Jaydeep Kataria
fuente

-2

Tuve el mismo problema y lo resolví usando:

display: inline-block;

en el diven cuestión.

— Dekcolnu
fuente