在Firefox中通过PHP或CSS用省略号截断长字符串[重复]

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; 好或准确。由于我没有使用等宽字体，因此三十个字符的实际宽度会有所不同。在另一个线程中发布的 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 的链接。我还提供了一个函数，可以再次用后续文本替换缩短的文本：

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