处理布局中的字符串长度

Question

我有一个标题和一个必须适合非常特定的宽度和高度的链接。如果标题太长，我会用一个类调整上面的边距，使其向上移动。我这样做是为了

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

26是我使用的值大多数标题示例。然而，有一个流氓标题，虽然＆gt; 26个长度，使用较小的单词，如“in”和“the”，所以它不会分成3行，就像它的其他＆gt; 26chars同行一样。

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

你如何处理这种情况？ （这些div左对齐，因此在所有示例之前，“查看完整报告”必须保持在相同的垂直位置，然后才会建议让它在标题之后流动。）

我最终使用JS（jQuery）来计算行数，但Chrome错误地将一些行报告为3行，而实际上只有2行，Firefox按预期工作。 Chrome问题很奇怪，因为尽管有相同的高度，1会报告为2行，其他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。