根据容器宽度截断 PHP 字符串

Question

上下文：描绘一连串文章预览，点击后会转到他们自己的页面（无关）。

每个预览都将包括标题和来自所代表文章顶部的内容（字符串）示例，并附加一个“阅读更多”锚点。 底部的简单示例。

我的目标：截断任何超过预览容器宽度的文本。标题一行，内容三行。

现在，我不太确定 PHP 是否能够根据容器宽度修剪字符串。但是，我确实知道，可以修剪一定数量的字符，例如this。我的代码类似...

// $data is an associate array full of stuff

foreach ($data as $key => $row) {
    $data[$key]['artcl_trunc_title'] 
        = (strlen($row['artcl_title']) > 100) ? $trimmed = substr($row['artcl_title'], 0, 100) . '..' : $row['artcl_title'];



    $data[$key]['artcl_trunc_content'] 
        = (strlen($row['artcl_content']) > 300) ? substr($row['artcl_content'], 0, 300) . '.. <a href="">READ MORE</a>' : $row['artcl_content'];
}

它的问题是文本是根据设定的图形修剪的。除了并非所有字符的宽度都相同之外，这不会是一个问题。看下面的例子（两行都是20个字符）

........

WWWWWWWWWWWWWWWWWWWW

现在，这是一个真实的问题示例（两篇文章具有相同的理论字符上限...标题 20，内容 50）

孤独的绅士..

所以有一个孩子从不离开他的房子......阅读更多

-

WainWright's Guide t..

我写这个指南是为了帮助那些有专业的人。阅读更多

这里看起来并不算太糟糕，但是您可以看到两个内容和标题之间的长度不同。放大时这是一场噩梦，并且您试图准确地填充一定数量的线条（因为有时线条可能会根据使用的字符出现或消失。）

另外，我不热衷于使用 css 溢出：隐藏，因为文本有时会被切成两半。

那么......关于如何处理这个问题或最佳实践的任何想法？ 谢谢

TL;DR：正如标题所说。

Answer 1

我会使用 text-overflow: ellipsis; 指令对 CSS 执行此操作。