Elipsis HTML/CSS (...) No funciona

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>

Fuente

2012-05-25 Storm3y

¿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

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>

http://jsfiddle.net/NawcT/

EDIT: La solución fue para diseñar el párrafo frente al div.

Fuente

2012-05-25 23:41:44 AlienWebguy

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; 
}

Fuente

2015-04-15 11:24:07

Respuesta

Cuestiones relacionadas