Estoy tratando de obtener puntos suspensivos trabajando en mi sitio. Este es el siguiente código HTML/CSS y no parece estar funcionando.Elipsis HTML/CSS (...) No funciona
CSS:
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
Sobre la base de la initial post, todos estamos asumiendo que es obvio, pero por si acaso ...;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
EDIT: La solución fue para diseñar el párrafo frente al div.
Parece que funciona bien en jsfiddle.net - Tengo el estilo en una hoja de estilos separada. – Storm3y
¿Estás usando varias hojas de estilo? Tal vez tengas un restablecedor que está castigando a tus reglas 'text-overflow' o' overflow'. Puede intentar agregar '! Important' después de las asignaciones de reglas para probar esa teoría. – AlienWebguy
La asignación de position:absolute al elemento que se va a truncar probablemente tendrá menos efectos secundarios indeseados que float:left.
Esto funcionó para mí:
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
¿Estás seguro de que está utilizando un navegador compatible con CSS 3? –
Echa un vistazo a esta respuesta si estás en FF: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5 – AlienWebguy
Me parece bien http://jsfiddle.net/ ZBQnL/ – barro32