使用/ jQuery截断长文本

时间:2011-11-08 19:26:06

标签: jquery

快速免责声明:我看到一些截断文本字符串的插件,但是它们没有按照我需要的方式执行...

我需要通过限制分配给它的空间来截断文本。例如,如果我有一个文本块并且它放在一个div中,该div具有阻止显示整个文本的维度,我想尽可能多地显示,然后在字符串的末尾添加螺旋。

我想我可以使用overflow:hidden,但是如何添加“...”?此外,是否可以确定文本是否需要比区域提供的更多空间?

<div style="width: 300px; height: 100px; border: 1px solid #ccc; overflow:hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis risus vel mi placerat ut bibendum dui tempus. In dictum quam eu sem condimentum elementum. Cras id urna eget turpis feugiat porttitor. In hac habitasse platea dictumst. Cras tincidunt risus id sapien sagittis feugiat interdum orci adipiscing. Sed venenatis neque nec nibh mattis laoreet. In ut sapien in felis posuere feugiat. Nulla vulputate, augue nec elementum volutpat, justo nisl vulputate tellus, eget blandit lectus enim at ante. Donec posuere augue a orci sollicitudin ut imperdiet ante varius. 
</div>

DEMO

3 个答案:

答案 0 :(得分:3)

它可能比你想象的要容易得多。 Here's a little sample on quirksmode使用text-overflow: ellipsis;截断文字。

根据该页面,它适用于IE 7及更高版本(带有一些调整);它会降级得相当好,因为它只是在不受支持的浏览器中剪辑。

以下是how to implement for all browsers的完整讨论。

答案 1 :(得分:2)

首先,这是一篇关于如何在div中找到文本宽度的帖子:Calculating text width

一旦你有这个宽度,你可以把你的包装div与文字宽度的宽度百分比。

然后,您可以将文本拆分为字符数组并获取上面的百分比并将其应用于该数组以获得估计的所需文本长度。

像这样的jsfiddle

http://jsfiddle.net/RGybB/

更新以显示百分比的计算方式

http://jsfiddle.net/RGybB/2/

答案 2 :(得分:0)

你不能用css做(除非你想剪切或匹配并换行)但是你不能只通过css添加“...” - 你必须做一些jQuery +测量文本的长度指定的字体...