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

Posted 2023-03-06

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

【英文标题】：Truncating long strings with ellipsis via PHP or CSS in Firefox [duplicate]

【发布时间】：2011-07-18 12:36:35

【问题描述】：

可能重复：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 中测量给定字体和字体大小的字符串的宽度，以便我可以更准确地放置省略号？

【问题讨论】：

可能的欺骗：***.com/questions/4927257/…

【参考方案1】：

This answer 可能有助于将输出截断为最接近的单词，然后简单地将… (...) html 实体附加到输出的末尾以获得最终输出。

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

【参考方案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);
);

【讨论】：

我在我的一些代码中做了这件事，但我发现如果你在 UL 的 LI 中间自动插入它，例如在富文本编辑器的输出中，它只会隐藏有问题的 LI 项目的结尾，而不是该 LI 项目的结尾以及文本的其余部分。所以，请注意它在那种情况下是行不通的。