在佈局中處理字符串長度

我有一個標題和一個鏈接，它們必須適合特定的寬度和高度。如果標題太長，我會用一個類調整上面的邊距，以便它向上移動。我與在佈局中處理字符串長度

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

26這樣做，這是我與配合最標題的例子起到了值。然而，有一個流氓頭銜雖然長度大於26，但使用的是較小的單詞，比如「in」和「the」，所以它不會像其他大於26的對手那樣分成三行。

在屏幕截圖中，您會看到1.「長但不是3行」示例，2.正常長度，3.更長，調整長度。

enter image description here

你是如何處理這種類型的場景？（這些div是左對齊的，因此在任何人建議在標題之後讓它流動之前，「See full report」必須保持在所有示例的相同垂直位置）。

我使用了最後的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');

我也試着把它放在高度上，但是瀏覽器/平臺的差異使得這個相當不可靠。

來源

2013-06-25 Titan

那麼你的問題是什麼？ –

我認爲你不能這樣做在PHP中，唯一的辦法是JavaScript，你可以得到元素的高度，並相應地更改邊距。 – jcubic

不相關，但相關：請不要使用short openingtag（'<？'）[檢查這個帖子的幾個很好的理由]（http://stackoverflow.com/questions/200640/are-php-short-tags-可以接受使用） –

你不應該在PHP端做。這是什麼CSS，看到這個問題/答案：https://stackoverflow.com/a/8865463/208067和這個鏈接http://css-tricks.com/vertically-center-multi-lined-text/

基本上，你使用兩個元素，其中一個垂直居中。外部容器將內部元素看作一條線，內部元素根據其具有的文本數來調整其高度。

編輯：由於文本呈現根據字體，瀏覽器和操作系統而變化，如果CSS不是選項，最後一個選項是使用javascript。

來源

2013-06-25 08:18:43

一個不錯的技術，但它不能解決我不幸的問題，它只是讓我回到我是如何擁有http://alturl.com/z4udt我認爲我將不得不求助於JS – Titan

在佈局中處理字符串長度

回答

相關問題