处理布局中的字符串长度

Question

我有一个标题和一个链接，它们必须适合非常特定的宽度和高度。如果标题太长，我会用一个类调整上面的边距，以便它向上移动。我正在这样做

<h2 <? if(strlen($report['title']) > 26) echo 'class="longer"';?>>Title text</h2>

26 是我使用的适合 most 标题示例的值。然而，有一个流氓标题，虽然长度 > 26，但使用较小的词，如“in”和“the”，因此它不会像其他 >26chars 对应物那样分成 3 行。

在屏幕截图中，您看到 1.“长但不是 3 行”示例，2.正常长度，3.更长的调整长度。

您如何处理这种情况？ （这些 div 是左对齐的，因此“查看完整报告”必须在所有示例中保持相同的垂直位置，然后有人建议将其放在标题之后）。

我最后求助于使用 JS (jQuery) 来计算行数，但 Chrome 错误地将某些行报告为 3 行，而实际上它只有 2 行，Firefox 按预期工作。 Chrome 问题很奇怪，因为尽管高度完全相同，但 1 会报告为 2 行，其他 3 会报告为 3。非常奇怪。

var divHeight = $(this).outerHeight();
var lineHeight = parseInt($(this).css('lineHeight'));
var lines = Math.round(divHeight / lineHeight);

 if(lines > 2)
     $(this).addClass('longer');

我也尝试过以高度为基础，但浏览器/平台的差异再次使这非常不可靠。

Answer 1

你不应该在 PHP 端这样做。这就是 CSS 的用途，请参阅此问题/答案：https://stackoverflow.com/a/8865463/208067 和此链接 http://css-tricks.com/vertically-center-multi-lined-text/

基本上，您使用两个元素，一个在另一个内部垂直居中。外部容器将内部元素视为单行，内部元素根据其拥有的文本数量调整其高度。

编辑：由于文本渲染会根据字体、浏览器和操作系统而变化，如果 CSS 不是一个选项，最后一个选项是使用 javascript。