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

Question

我尝试使用：

• CSS3 中的文本溢出省略号功能（但不支持多行）
• 几个 jquery 插件，例如 dotdotdot ( http://dotdotdot.frebsite.nl/ )
• jquery autoellipsis ( http://pvdspek.github.com/jquery.autoellipsis/ )。

所有这些工具都运行良好，但如果内容包含图像，则使用 dotdotdot 或 jquery.autoellipsis 计算的截断高度是错误的。

我只是想知道是否有人有处理这个问题的好主意（也许是一些服务器端处理？），提前谢谢:-)。

Answer 1

如果您需要 X-Browser 支持（不仅适用于 Opera 和 Webkit，就像 @c69 解释的那样）。

我找到了一个更花哨的方法。也可进行手动调整。

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

来源：
1 mobify
2 css-tricks

Answer 2

通过为 multi-line 设置一个固定的高度来使用您自己的省略号定位偏移量div，然后绝对定位img和省略号以简化脚本。正确的偏移量特定于font-size每个句子的特定字母的字距和字距，因此除非使用等宽字体，否则需要反复试验。基本结构是这样的：

<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">…&lt;/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>