php - 在布局中处理字符串长度

Question

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

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

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

在屏幕截图中，您会看到 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。