css - 隐藏溢出答案

【问题标题】：css - hiding overflowcss - 隐藏溢出
【发布时间】：2010-09-19 17:05:38
【问题描述】：

是否可以在固定宽度的 div 中隐藏文本的溢出并将其替换为“...”？如果文本被截断显然看起来很难看，在这些情况下我真的需要能够显示...。

【问题讨论】：

看看这个问题stackoverflow.com/questions/802175/…

标签： css text truncate

【解决方案1】：

你可以用text-overflow: ellipsis;来做，但是在IE6和Firefox中好像不行..

http://www.quirksmode.org/css/textoverflow.html

【讨论】：

非常好！正是我需要的。
@Joe 这不是一个好的解决方案。 ellipsis 是 overflow 的 IE 专有值，不适用于 IE 以外的任何浏览器。
作为我链接到状态的页面（并且我已经对此进行了测试），它在 Chrome、Safari、Opera（带有'-o-text-overflow'）和当然 IE7+ 中运行良好

【解决方案2】：

我不确定你是否只能使用 CSS 来做到这一点，你必须使用 javascript 或 php。

【讨论】：

【解决方案3】：

你不能用 css 做到这一点。您必须使用 PHP 或 Javascript 来完成。 Here's a decent tutorial 用 JS 来做。

【讨论】：

【解决方案4】：

希望这会有所帮助

$('#customComboBox').text(($.trim($('#customComboBox').text()).length > 19) ? 
    $.trim($('#customComboBox').text()).substring(0, 16) + '...' : 
    $.trim($('#customComboBox').text()));

【讨论】：

不是一个很好的解决方案——你仍然需要知道有多少个字符直到文本溢出。此外，通过一些缓存，可以使 jQuery 代码变得更加高效。