CSS desbordamiento - solamente 1 línea de texto

tengo div con el siguiente estilo CSS:CSS desbordamiento - solamente 1 línea de texto

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

cuando inserto, en que div, una larga línea de texto, se está rompiendo a una nueva línea y muestra todo el texto. Lo que quiero es tener solo una línea de texto que no rompa la línea. 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 una altura que es igual a la fuente, debería funcionar y no causar ningún problema en diferentes navegadores.

¿Cómo puedo hacer eso?

Fuente

2011-09-25 some Folk

¿Puedes demostrar tu problema en [jsFiddle] (http://jsfiddle.net/)? –

242

Si quiere restringirlo a una línea, use white-space: nowrap; en la div.

Fuente

2011-09-25 15:16:20 Septnuits

funciona muy bien, gracias! –

Debería aceptar su respuesta, haciendo clic en la flecha de la izquierda. – DanMan

increíble, gracias! –

-8

line-height:335px;

puede probar esta ...

Fuente

2011-09-25 15:20:01 bshener

... ¿Cómo ayuda esto? – Archonic

Si desea indicar que todavía hay más contenido disponible en ese div, puede probablemente querrá mostrar la "elipsis":

text-overflow: ellipsis;

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

Además, asegúrese de marcar this thread para manejar esto en Firefox.

Fuente

2011-09-25 15:32:10 Mouli

+35

Creo que debe usar 'text-overflow: ellipsis;' con 'overflow: hidden;' y 'white-space: nowrap;' para que funcione –

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

mina solo se muestra en una línea y no llena el DIV antes de mostrar las elipsis ... http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts (http://jsfiddle.net/ofrj55j4/20/) – SearchForKnowledge

que tenían el mismo problema y lo resolvió mediante el uso de:

display: inline-block;

en el div en cuestión.

Fuente

2014-06-03 13:07:02 Dekcolnu

Usted puede utilizar el código CSS:

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

El texto -desbordamiento bienes en ofertas de CSS con situaciones en las que se recorta de texto cuando se desborda la caja del elemento. Puede ser recortado (es decir, cortado, oculto), mostrar un elipsis ('...', Valor de rango Unicode U + 2026).

Tenga en cuenta que el texto -desbordamiento sólo se produce cuando la propiedad de desbordamiento del contenedor tiene el valor oculta, desplazamiento o automático y white-space: nowrap;.

desbordamiento de texto sólo puede ocurrir en bloque o inline-block elementos de nivel, ya que el elemento tiene que tener una anchura con el fin de ser desbordamiento-ed. El desbordamiento ocurre en la dirección determinada por la propiedad de dirección o los atributos relacionados.

Fuente

2017-03-28 05:25:27

ellipsis! una explicación de lo que hace y por qué es genial sería bueno, sin embargo ... – benzkji

CSS desbordamiento - solamente 1 línea de texto

Respuesta

Cuestiones relacionadas