缩短句子的算法存在问题

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-overflow: ellipsis因为它没有得到广泛的支持，并且它不允许我使“...”可点击链接到完整的条目，并且我不惜一切代价需要它）。

提前致谢。

Answer 1

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

Answer 2

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

Answer 3

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

代码复制自 如何在 Firefox 中模拟 text-overflow: ellipsis ？：

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 4

既然您要求一个网页，那么您可以使用 CSS text-overflow 来做到这一点。
它似乎得到了足够的支持，对于 Firefox 来说似乎有 css 解决方法 或 jquery 解决方法...

类似这样：

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

如果您填充的文本多于其适合的范围，它将在末尾添加三个点。
如果文本确实太长，只需剪切文本，这样就不会浪费 html 空间。

更多信息请参见：

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

在末尾添加“查看更多”链接非常简单，因为附加另一个具有固定宽度的跨度，包含用于查看更多的链接。在此之前，文本将被省略号截断。