非常に特定の幅と高さに収まらなければならないタイトルとリンクがあります。タイトルが長すぎる場合は、上の余白をクラスで調整して上に移動します。私はこれをやっています
<h2 <? if(strlen($report['title']) > 26) echo 'class="longer"';?>>Title text</h2>
26 は、ほとんどのタイトルの例に適合する、私が試した値です。ただし、長さが 26 文字を超えるにもかかわらず、「in」や「the」などの短い単語を使用しているため、他の 26 文字を超える他のタイトルのように 3 行に分割されていない不正なタイトルがあります。
スクリーンショットでは、1. 「長いが 3 本の線ではない」例、2. 通常の長さ、3. より長く、調整された長さを示しています。
この種のシナリオをどのように処理しますか? (これらの div は左揃えであるため、「レポート全体を表示」は、タイトルの後にフローさせることを推奨する前に、すべての例で同じ垂直位置に留まる必要があります)。
最後に JS (jQuery) を使用して行をカウントしましたが、Chrome は実際には 2 行しかないのに 3 行と誤って報告し、Firefox は期待どおりに機能しました。高さがまったく同じにもかかわらず、1 つは 2 行、もう 1 つは 3 行として報告されるため、Chrome の問題は奇妙です。非常に奇妙です。
var divHeight = $(this).outerHeight();
var lineHeight = parseInt($(this).css('lineHeight'));
var lines = Math.round(divHeight / lineHeight);
if(lines > 2)
$(this).addClass('longer');
私も高さに基づいて試してみましたが、ブラウザ/プラットフォームの違いにより、これはかなり信頼できなくなりました.