4

我有一个网页显示多个文本条目，它们的长度没有限制。如果它们太长而无法避免进入新生产线，它们会被自动剪切。这是剪切它们的 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因为它没有得到广泛的支持，它不允许我让“...”点击链接到完整的条目，我不惜一切代价需要这个）。

提前致谢。

4

4 回答 4

3

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

于 2011-07-06T12:03:10.687 回答
1

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

于 2011-07-06T12:16:27.403 回答
1

用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;
    }
}
于 2011-07-06T12:18:55.170 回答
-2

由于您要求的是网页，因此您可以使用 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

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

于 2011-07-06T12:54:45.617 回答