0

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

<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 会报告为 3。非常奇怪。

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

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

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

4

1 回答 1

1

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

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

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

于 2013-06-25T08:18:43.867 回答