JavaScript:根据外部对象的尺寸截断文本

时间:2010-12-02 15:08:16

标签: javascript jquery-plugins

我希望使用JavaScript,将给定的文本剪切为适合文本所在的对象,并在末尾添加“...”。

例如: JavaScript从第三方Web服务获取数据,需要将文本放入200 x 300 px div。文本的长度各不相同,所以假设它将占用比提供的空间更多的空间。

如何确定文本将突破边框并通过砍掉文本并在末尾添加“...”来阻止文本?

4 个答案:

答案 0 :(得分:4)

several jQuery plugins可以做到这一点。

答案 1 :(得分:1)

如果您不介意使用canvas元素,可以使用它来测量文本的宽度。这是一个例子:

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

答案 2 :(得分:1)

ruzee.com has a solution使用prototype.js和一小段代码[MIT许可]来做你想做的事情; demo

答案 3 :(得分:1)

您可能还想查看同样执行此操作的CSS 3属性text-overflow

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

可以检查浏览器是否支持它,因此您始终可以添加JavaScript后退。

if (!'textOverflow' in document.createElement('div').style) {
   // Use JavaScript solution here
}