Javascript jQuery：缩短字符串长度以适应设定的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2546938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: shorten string length to fit a set width
提问by Marius
I have a table, and in each cell I want to place strings, but they are much wider than the cell width. To prevent line break, I would like to shorten the strings to fit the cell, and append '...' at end to indicate that the string is much longer.
我有一张桌子，我想在每个单元格中放置字符串，但它们比单元格宽度宽得多。为了防止换行，我想缩短字符串以适应单元格，并在末尾附加 '...' 以表示字符串要长得多。
The table has about 40 rows and has to be done to each cell, so its important that its a quick. Should I use JS/jQuery for this?
该表有大约 40 行，并且必须对每个单元格进行处理，因此它的快速性很重要。我应该为此使用 JS/jQuery 吗？
How would I do it?
我该怎么做？
Thank you for your time.
感谢您的时间。
Kind regards,
Marius
亲切的问候，
马吕斯
回答by James Westgate
You can use CSS -- text-overflow: ellipsis -- for this - with some caveats for certain browsers and workarounds listed here:
您可以使用 CSS -- text-overflow: ellipsis -- 为此 - 此处列出了针对某些浏览器和解决方法的一些注意事项：
http://mattsnider.com/css/css-string-truncation-with-ellipsis/ (archived)
http://mattsnider.com/css/css-string-truncation-with-ellipsis/（存档）
回答by mcgrailm
this should do the trick where 8 is is the the size of the text you want to keep
这应该可以解决问题，其中 8 是您要保留的文本大小
$('td').each(function(){
$(this).text($(this).text().substring(0,8)+"...");
});
to answer you comment I think jquery width()should help get you going but I think your headed up a slippery slop you should consider something different like putting the text in a div or using flexigridor jgrid
回答你的评论我认为 jquery width()应该可以帮助你前进，但我认为你的头很滑，你应该考虑一些不同的东西，比如将文本放在 div 中或使用flexigrid或jgrid
回答by Marc Diethelm
Use my jQuery plugin: jQuery-Shorten.It handles all the cases, makes use of text-overflow:ellipsis if available and it's very fast.
使用我的 jQuery 插件：jQuery-Shorten。它处理所有情况，使用 text-overflow:ellipsis（如果可用）并且速度非常快。
Download: github.com/MarcDiethelm/jQuery-Shorten
下载： github.com/MarcDiethelm/jQuery-Shorten
Demo & Doc: http://web5.me/jquery/plugins/shorten/shorten.doc.html
演示和文档：http: //web5.me/jquery/plugins/shorten/shorten.doc.html
You can configure how the text ends (ellipsis). The default is a three-dot char ("…", …, Unicode: 2026) but you can use anything you want, including markup.
您可以配置文本的结束方式（省略号）。默认值为三点字符（“...”、…、Unicode: 2026），但您可以使用任何您想要的字符，包括标记。
The text width of the 'selected' element (eg. span or div) is measured using Canvas or by placing it inside a temporary table cell and shortened (initially using an educated guess for efficiency) and measured again until it (and the appended ellipsis or text) fits inside the block. A tooltip on the 'selected' element displays the full original text.
“选定”元素（例如 span 或 div）的文本宽度使用 Canvas 或通过将其放置在临时表格单元格中并缩短（最初使用有根据的猜测来提高效率）并再次测量直到它（和附加的省略号）或文本）适合块内。'selected' 元素上的工具提示显示完整的原始文本。
