jquery-plugins - 带有 img 标签的多行文本溢出 :ellipsis in CSS or JS,

Question

我尝试使用:

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

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

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

Answer 1

通过为多行 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">…</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>