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属性文本 - 溢出：省略号，因为它没有被广泛支持，它不允许我点击“...”链接到完整的条目，我需要不惜一切代价）。

提前致谢。

Answer 1

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

Answer 2

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

Answer 3

在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 4

由于您要求的是网页，因此您可以使用CSS文本溢出来执行此操作。它似乎得到了足够的支持，对于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

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

算法缩短句子的问题

4 个答案: