多行文本溢出:CSS或JS中的省略号,带有img标记

Question

我试过用:

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

所有这些工具都能很好地工作,但如果内容有图像,则使用dotdotdot或jquery.autoellipsis进行截断的计算高度是错误的.

我只是想知道是否有人有一个很好的想法处理这个(可能是一些服务器端处理？),谢谢提前:-).

Answer 1

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

\n\n

<style type="text/css">\n.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; }\n.lineup { top: 6px; }\n.monalisa { position: absolute; top: 2px; left: -18px; }\n.wrapper { position: relative; width: 360px }\n.textblob { width: 330px; height: 30px; }\n</style>\n<!--...-->\n<div class="wrapper">\n  <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/>\n  <div class="textblob">\n    <span class="truncate">\xe2\x80\xa6</span>\n    <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>\n  </div>\n</div>\n

\n