html - para - desbordamiento de CSS: solo 1 línea de texto
estilos css html ejemplos (5)
Puedes usar este código css:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
La propiedad de desbordamiento de texto en CSS se ocupa de situaciones en las que el texto se recorta cuando se desborda el cuadro del elemento. Puede recortarse (es decir, cortado, oculto), mostrar puntos suspensivos (''...'', Valor de rango Unicode U + 2026).
Tenga en cuenta que el desbordamiento de texto solo se produce 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 bloque en línea , porque el elemento debe tener un ancho para poder desbordarse. El desbordamiento ocurre en la dirección determinada por la propiedad de dirección o los atributos relacionados.
Tengo div con el siguiente estilo css:
width:335px; float:left; overflow:hidden; padding-left:5px;
Cuando inserto, en ese div , una larga línea de texto, se abre 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 equivocado.
¿Tal vez si agrego la altura que es igual que la fuente, debería funcionar y no causar ningún problema en diferentes navegadores?
¿Cómo puedo hacer eso?
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 además white-space: nowrap; en white-space: nowrap; sugerido por Septnuits.
Además, asegúrese de consultar esta secuencia para manejar esto en Firefox.
Si desea restringirlo a una línea, use white-space: nowrap; en el div.
Tuve el mismo problema y lo resolví usando:
display: inline-block;
en el div en cuestión.
line-height:335px;
puedes probar esto ...