Jquery plugins 多行文本溢出：CSS或JS中的省略号，带有img标记

我尝试使用：

• CSS3中的文本溢出省略号功能（但不支持多行）
• 几个jquery插件，比如dotdot（）
• jquery自动省略号（）

所有这些工具都工作得很好，但如果内容包含图像，则使用dotdot或jquery.autoellipsis计算的截断高度是错误的

---

我只是想知道是否有人有处理这个问题的好主意（可能是服务器端处理？），提前感谢：-）。

使用您自己的省略号定位偏移量，为多行

div

设置固定高度，然后绝对定位

img

和省略号以简化脚本。右偏移量特定于

字体大小

和每个句子特定字母的字距，因此除非使用单空格字体，否则需要反复试验。基本结构如下：

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

.truncate{位置：绝对；顶部：20px；右侧：6px；背景色：#fff；}
.lineup{top:6px；}
.蒙娜丽莎{位置：绝对；顶部：2px；左侧：-18px；}
.wrapper{位置：相对；宽度：360px}
.textblob{宽度：330px；高度：30px；}
…
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

如果您需要X浏览器支持（不仅仅是Opera和Webkit，比如@c69）。

我找到了一个更奇特的方法。 也可用于手动调整。

请看一个关于的工作示例

HTML

来源：

---

文本溢出：-o-ellipsis-lastline

，但它只在Opera中起作用：对于Webkit浏览器，您可以使用

-Webkit line clamp

，当文本达到一定行数时，它会剪切文本。我不知道本地Gecko或IE方法。我不知道-o-ellipsis-lastline，但正如你所说，它只在Opera中有效。我想在其他浏览器中用javascript实现会非常复杂，但这正是我想要的！

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

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