multilínea de texto de desbordamiento: puntos suspensivos en CSS o JS, con las etiquetas img

Question

He intentado utilizar: función de puntos suspensivos

• texto desbordamiento en CSS 3 (pero no admite varias líneas)
• varios Complementos jquery como dotdotdot (http://dotdotdot.frebsite.nl/)
• jquery autoellipsis (http://pvdspek.github.com/jquery.autoellipsis/).

Todas estas herramientas funcionan bastante bien pero si el contenido tiene imágenes de la altura calculada para el truncamiento con dotdotdot o jquery.autoellipsis que está mal.

Me preguntaba si alguien tiene una gran idea para tratar con esto (¿quizás algún procesamiento en el servidor?), Gracias por adelantado :-).

Answer 1

Utilice sus propios desplazamientos de posición de puntos suspensivos estableciendo una altura fija para la línea múltiple div, luego posicionando completamente el img y las elipsis para simplificar la secuencia de comandos. El desplazamiento a la derecha es específico del font-size y el interletraje de las letras particulares de cada oración, por lo que es necesario realizar una prueba y un error a menos que se utilice una fuente monoespaciada. La estructura básica es algo como esto:

<style type="text/css"> 
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; } 
.lineup { top: 6px; } 
.monalisa { position: absolute; top: 2px; left: -18px; } 
.wrapper { position: relative; width: 360px } 
.textblob { width: 330px; height: 30px; } 
</style> 
<!--...--> 
<div class="wrapper"> 
    <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/> 
    <div class="textblob"> 
    <span class="truncate">…</span> 
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span> 
    </div> 
</div> 

Answer 2

Si necesita soporte X-Browser (no sólo para la Ópera y Webkit, como @ C69 explicó).

Encontré una manera más elegante. Pero también para el ajuste manual.

eche un vistazo a un ejemplo de trabajo en jsfiddle.

HTML

<p> 
    Lorem ipsum dolor sit amet, consectetur 
</p> 

css

p { 
    height: 3.7em; 
    position: relative; 
    overflow: hidden; 
    width: 235px; 
} 

p:after{ 
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */ 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); 
    bottom: 0; 
    content: "..."; 
    float:right; 
    padding-left: 10px; 
    position: absolute; 
    right: 0; 
} 

Fuente:
1 mobify
2 css-tricks