多行文本溢出：CSS或JS中的省略号，带有img标签 [英] Multi-line text-overflow:ellipsis in CSS or JS, with img tags

问题描述

我尝试使用：

• CSS3中的文字溢出省略号功能（但不支持多行）


• 几个jquery插件，如dotdotdot（ http://dotdotdot.frebsite.nl/ ）


• jquery autoellipsis（ http://pvdspek.github.com/ jquery.autoellipsis / ）。

所有这些工具都很好用，但如果内容有图像，使用dotdotdot或jquery.autoellipsis截断的计算高度是错误的。 / p>

我只是想知道有人有一个伟大的想法处理这个（也许一些服务器端处理？），感谢由advance： - ）。

解决方案

如果您需要X-Browser支持（不仅适用于Opera和Webkit，如@ c69说明）。

$ b我发现了一个更奇特的方式。
但也可用于手动调整。


查看的工作示例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;前一个浏览器需要前缀* / 
 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; 
右：0; 
} 
  

资料来源：

1 mobify

2 css-tricks

I tried using :

• text-overflow ellipsis feature in CSS3 (but doesn't support multi-line)
• several jquery plugins like dotdotdot (http://dotdotdot.frebsite.nl/)
• jquery autoellipsis (http://pvdspek.github.com/jquery.autoellipsis/).

All of these tools work quite well but if content has images the calculated height for truncation with dotdotdot or jquery.autoellipsis is wrong.

I was just wondering if someone has a great idea for dealing with this (maybe some server-side processing on ?), Thanks by advance :-).

解决方案

If you need X-Browser support(not only for Opera and Webkit, like @c69 explained).

I found a more fancy way. But also for manually adjustment.

take a look at a working example on 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;
}

Source:
1 mobify
2 css-tricks

这篇关于多行文本溢出：CSS或JS中的省略号，带有img标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！