这段代码对我很有帮助，谢谢！
但我注意到一些改进：
1/ 解决某些情况下宽度不够的问题
替换：
<td class="preview">Hey bob, got any plans for new years yet?</td>
与：
<td><div class="preview">Hey bob, got any plans for new years yet?</div></td>
2/ 该脚本不适用于特定字体（大小、重量、系列...）
您需要将字体应用到用于计算文本大小的“不可见”范围。例如（必要时完成所有需要的字体属性）：
(...)
// build a bench-mark to gauge it from
var roomWidth = $(this).innerWidth();
// now, get the width and play with it until it fits (if it doesn't)
var fontSize=$(this).css("font-size");
spanTest.css("font-size", fontSize);
var fontStyle=$(this).css("font-style");
spanTest.css("font-style", fontStyle);
var fontWeight=$(this).css("font-weight");
spanTest.css("font-weight", fontWeight);
var fontFamily=$(this).css("font-family");
spanTest.css("font-family", fontFamily);
(...)
3/ 表演
我用 1000 个元素进行了测试，每个元素都有 25 个额外字符要删除（在 Firefox 7 上）
您的脚本需要将近 40 秒才能完成工作。
看来问题出在“display:none”跨度上。
使用“position:absolute;top:-100px”将跨度放在窗口外会带来更好的性能：处理 1000 个元素大约需要 11 秒！
所以替换：
var spanTest = $('<span>').css('display','none').attr('id','span-test-tester');
与：
var spanTest = $('<span>').attr('id','span-test-tester').css('position','absolute').css('top','-100px');
总结：
再次感谢您提供此脚本...非常有用！
这是我完整的代码改编，如果它可以帮助某人......：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.preview {
}
.backg{
background:red;
margin: 20px 0;
border:1px solid blue;
width:200px;
padding:10px;
font-size:14px; // change it to test with other fonts
font-weight:bold;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
truncate();
});
function truncate(){
// Create a span we can use just to test the widths of strings
var spanTest = $('<span>').attr('id','span-test-tester').css('position','absolute').css('top','-100px');
$('body').append(spanTest);
// function to get the length of a string
function getLength(txt){
return spanTest.text(txt).width();
}
var nb =0;
// now make all the previews fit
$('.preview').each(function(){
nb++;
// Get the current font and apply it to hidden span tester
var fontSize=$(this).css("font-size");
spanTest.css("font-size", fontSize);
var fontStyle=$(this).css("font-style");
spanTest.css("font-style", fontStyle);
var fontWeight=$(this).css("font-weight");
spanTest.css("font-weight", fontWeight);
var fontFamily=$(this).css("font-family");
spanTest.css("font-family", fontFamily);
// build a bench-mark to gauge it from
var roomWidth = $(this).innerWidth();
// now, get the width and play with it until it fits (if it doesn't)
var txt = $(this).text();
var contentsWidth = getLength(txt);
if (contentsWidth > roomWidth){ // bigger than we have to work with
roomWidth -= getLength('...'); // work within confines of room + the ellipsis
while (contentsWidth > roomWidth){
txt = txt.substring(0,txt.length-1);
contentsWidth = getLength(txt);
}
// set the text to this
$(this).text(txt).append($('<span>').text('...'));
}
});
}
//]]>
</script>
</head>
<body>
<div class="backg"><div class="preview">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div></div>
(... repeat 1000 times ...)
<div class="backg"><div class="preview">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div></div>
</body>
</html>
再见！