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

Question

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

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

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

Answer 1

有several jQuery plugins可以做到这一点。

Answer 2

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

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

Answer 3

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

Answer 4

您可能还想查看同样执行此操作的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
}