缩短句子的算法问题

Question

我有一个网页，它显示多个文本条目，它们的长度没有限制。如果它们太长而无法避免进入新生产线，它们会被自动剪切。这是剪切它们的 PHP 函数：

function cutSentence($sentence, $maxlen = 16) {
    $result = trim(substr($sentence, 0, $maxlen));

    $resultarr = array(
            'result' => $result,
            'islong' => (strlen($sentence) > $maxlen) ? true : false    
        );

    return $resultarr;
}

如下图所示，结果很好，但也有一些例外。包含多个 Ms 的字符串（我必须考虑这些）将转到换行符。

现在所有字符串都在 16 个字符后被删减，这已经非常低并且难以阅读。

我想知道是否存在一种方法来确保应该获得更多空格的句子得到它，并且那些包含宽字符的句子最终被削减为更少的字符（请不要建议使用 CSS 属性 text-溢出：省略号，因为它没有得到广泛的支持，它不允许我点击“...”链接到完整的条目，我不惜一切代价需要这个）。

提前致谢。

Answer 1

既然你要求一个网页，那么你可以使用 CSS text-overflow 来做到这一点。 好像支持够了，firefox好像有css workarounds或者jquery workarounds...

类似这样的：

span.ellipsis {
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
   width:100%;
   display:block;
}

如果您填写的文本多于其大小，则会在末尾添加三个点。 如果文本实在太长，就剪掉文本，以免浪费 html 空间。

更多信息在这里：

https://developer.mozilla.org/En/CSS/Text-overflow

在末尾添加一个“查看更多”链接很容易，因为附加另一个固定宽度的跨度，包含查看更多链接。在此之前，文本将被省略号截断。

Answer 2

使用 Javascript 而不是 PHP。使用 DOM 属性 offsetWidth 获取包含元素的宽度。如果超过某个最大宽度，则相应地截断。

从How can I mimic text-overflow: ellipsis in Firefox?复制的代码：

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

Answer 3

如果您的应用程序的样式不太重要，您可以简单地使用等宽字体系列中的字体，例如 Courier。

Answer 4

您可以使用固定宽度的字体，这样所有字符的宽度都相等。或者可选地获取每个字符的宽度像素并将它们加在一起并删除额外的字符，而不是像素长度超过一定数量。