查找文本將佔用多少行

Question

我有一個產品列表，其中寫有產品的標題。我想要做的是檢查產品標題是否超過2行，並且在這種情況下，只需打印2行，並將「...」放在最後。

任何想法？

Answer 1

的一個問題是，字體渲染甚至可以在不同的版本，並在不同的操作系統是從瀏覽器到瀏覽器不同。所以在預先計算文本的長度/高度時，並不那麼容易。你可以做這樣的事情：

• 創建一個字段的最大高度
• 集這一領域的溢出隱藏
• 編寫JavaScript代碼執行以下操作：

__

• 1獲取文本
• 2切斷了最後一個詞（usin GA正則表達式或類似的東西）
• 3檢查容器是否仍具有溢出
• 4執行步驟2和3這麼久，直到沒有更多的溢出
• 5切斷多了一個字（你仍然可以有情況下，你沒有空間「...」）
• 6追加「...」

，如果你有一個純文本這一次纔有效。如果你在標題中有標籤，像這樣的東西可能會把你的HTML結構搞得一團糟。想象一下，這個結果是一個開放的「<範圍>」 - 標籤永遠不會關閉...... :)

你的正則表達式/文字查找器也應該是如此聰明，以切除「詞分離」的東西。

我不知道這是否是一個非常好的方法，但也許有點幫助，因爲使用jQuery，這隻會是4-5行。

Answer 2

你將需要玩弄你的設計，看看有多少角色將等於兩行。如果你沒有使用固定字體，你必須看一堆案例。

我使用此功能在我的一個網站上執行此操作。這會修剪到某個最大數量的字符，然後在字符串結尾之前的第一個空格處打斷字符串。可能發生的

function str_tr($string,$max) 
{ 
if(strlen($string)>$max) 
{ 
    $string = substr($string,0,$max); 
    $i = strrpos($string," "); 
    $string = substr($string,0,$i); 
    $string .= "..."; 
} 
return $string; 
} 

Answer 3

正如@cpilko說...如果它不是一個固定大小的字體......它不會是肯定的工作...

30我（小字符）與W的非固定字體

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii（大字符）

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

但是，在固定大小的字體......事情更容易預測：

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww 

Answer 4

你需要的是文本溢出CSS屬性。它使用CSS來切斷固定寬度容器中的多餘文本，並用省略號字符替換溢出。更多詳情：

http://www.quirksmode.org/css/textoverflow.html

Answer 5

最後我做這樣的事情：

<p id="titleContainer">blabla bla bla blablabla bla blabla bla bla blablabla bla blabla bla bla blablabla bla</p> 

<script type="text/javascript"> 
    function checkOverflow(el){ 
    var curOverflow = el.style.overflow; 
    if (!curOverflow || curOverflow === "visible"){ 
     el.style.overflow = "hidden"; 
    } 

    // 26 pixels was the height of 2 lines 
    var isOverflowing = el.scrollHeight > 26; 
    el.style.overflow = curOverflow; 
    return isOverflowing; 
    } 

    var titleContainer = document.getElementById("titleContainer"); 
    var titleTxt = titleContainer.innerHTML + "..."; 

    while(checkOverflow(titleContainer)){ 
    titleTxt = titleTxt.replace(/ [^ ]+\.\.\.$/, "..."); 
    titleContainer.innerHTML = titleTxt; 
    } 
</script>