carrera
tengo div con 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 divide 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 una 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?
Si desea restringirlo a una línea, use white-space: nowrap; en el div.
-
Pero luego no muestra los puntos suspensivos si el texto va más allá de la dimensión especificada. stackoverflow.com/questions/26342411/…
– BuscarConocimiento
13/10/2014 a las 15:59
-
Funciona, genial. Pero yo necesito
...si hay más caracteres para mostrar porque cuando la longitud de la línea es larga y sale del div escrito.–Moshi
29 de septiembre de 2016 a las 13:18
-
Esto actúa raro si el texto oculto contiene hipervínculos. Si tuviera que pasar por la página, haría que el enlace en el texto oculto se desplazara a la pantalla, cuando debería estar oculto.
–Eric
24 de marzo de 2017 a las 3:36
Mouli
Si desea indicar que aún hay más contenido disponible en ese div, probablemente desee mostrar los “puntos suspensivos”:
text-overflow: ellipsis;
Esto debe ser además de white-space: nowrap; sugerido por Septnuits.
Además, asegúrese de revisar este hilo para manejar esto en Firefox.
-
Creo que debes usar
text-overflow: ellipsis;conoverflow: hidden;ywhite-space: nowrap;para que funcione– Francisco Costa
11 de marzo de 2013 a las 12:34
-
caniuse.com/#feat=desbordamiento de texto también conocido como sí tu puedes. Considere colocar todo el contenido en el atributo de título, para que el usuario aún tenga acceso a él.
– DanMan
11/10/2013 a las 10:28
-
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)
– BuscarConocimiento
13/10/2014 a las 16:01
Gaurav Tripathi
Puedes usar este código css:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
los desbordamiento de texto La propiedad en CSS se ocupa de situaciones en las que el texto se recorta cuando se desborda el cuadro del elemento. Puede ser cortado (es decir, cortado, oculto), mostrar un elipsis (‘…’, valor de rango Unicode U+2026).
Tenga en cuenta que desbordamiento de texto solo ocurre cuando la propiedad de desbordamiento del contenedor tiene el valor oculto, Desplazarse o auto y espacios en blanco: nowrap;.
El desbordamiento de texto solo puede ocurrir en bloquear o bloque en línea elementos de nivel, porque el elemento necesita tener un ancho para poder desbordarse. El desbordamiento ocurre en la dirección determinada por la propiedad de dirección o los atributos relacionados.
-
Esto es aún más perfecto para mí. Gracias
– Marcel Kraan
22 oct 2020 a las 22:48
Omid Ahmadyani
el mejor código para UX y UI es
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Defina el ancho también para establecer el desbordamiento en una línea
Alexander van Oostenrijk
Pude lograr esto usando el webkit-line-clamp y el siguiente CSS:
div {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
shafii muhudi
si además, por favor, si tiene un texto largo, puede usar este código css a continuación;
text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;
hacer visible toda la línea de texto.
¿Puedes demostrar tu problema en jsviolín?
– Harry alegría
25 de septiembre de 2011 a las 15:14