Question

可能重复：
text-overflow:ellipsis in Firefox 4?

我遇到Truncating long strings with CSS: feasible yet?中提到的同一问题。该帖子已经差不多两年了，Firefox仍然忽略了text-overflow: ellipsis;属性。

我目前的解决方案是在PHP中截断长字符串，如下所示：

if(strlen($some_string) > 30)
    $some_string = substr($some_string,0,30)."...";

或多或少有效，但它在支持它的浏览器中看起来不如text-overflow: ellipsis;那么好或准确。由于我没有使用等宽字体，因此实际宽度为30个字符。另一个帖子中发布的XML修补程序和jQuery插件似乎也不再适用于Firefox。

目前有哪种方法可以在独立于浏览器的CSS中执行此操作？如果没有，有没有办法在PHP中给出字体和字体大小来测量字符串的宽度，以便我可以更准确地放置省略号？

Answer 1

This answer可能有助于将输出截断为最接近的单词，然后只需将…（...）HTML实体附加到输出的末尾即可获得最终输出。

正如您已经注意到，目前还没有足够广泛的浏览器支持CSS解决方案，您仍然需要担心旧的浏览器。

Answer 2

令人遗憾的是，所有浏览器都无法处理相同的CSS功能。但是，您总是可以使用JavaScript（在jQuery的帮助下）执行此类操作。

以下是这样的事情的示例：http://jsfiddle.net/VFucm/

基本思想是将你的字符串变成一个单词数组，如下所示：

var words = full.split(/\s+/g);

循环遍历它们并取第一个N（在本例中我选择了24个）并将它们推入另一个数组：

for (var i = 0; i < 24; i++) {
    short.push(words[i]);
}

将它们放回到它们来自的HTML元素中：

$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');

...这里我添加了一个“链接”来扩展短文本。它的外观和行为类似于使用CSS的链接。我还提供了一个函数来再次用foll文本替换缩短的文本：

$('.expand').click(function() {
    $('.snip').html(full);
});