CSS - 文本溢出：省略號修復

我正在使用文本溢出：省略號來使我的容器文章中的最大行數。它工作正常，但限制1行後開始，我需要更多地設置它。（如3-4）的問題是我怎麼嘗試它移動我的文章容器中的一切或沒有改變。CSS - 文本溢出：省略號修復

我是新的CSS，所以我很大膽地做錯了什麼，你能幫我嗎？

用省略號CSS的部分（完整的CSS/HTML，可以在演示上面找到）：

#article-container p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 168px; 
} 

#article-container p.more { 
    overflow: hidden; 
    padding: 0; 
    white-space: normal; 
    width: auto; 
}

所以，球員在這裏的人誰可以幫我把它限制更多的線不只是一個？

感謝您閱讀本文

來源

2014-04-28 user3009924

http://cssmojo.com/line-clamp_for_non_webkit-based_browsers/ – CBroe

是否有機會讓我可以工作的小提琴，因爲我試試這個，它只是刪除我的p.more :( – user3009924

不，你可以看到它是如何工作的在這個頁面上的例子中_理解它，然後將它轉移到你的環境中是你的工作... – CBroe

Elipse在CSS中目前只有1行。有幾個JavaScript庫可以幫助你實現你想要的。例如，http://dotdotdot.frebsite.nl/。

來源

2014-04-28 14:29:37

我需要修復它沒有JS，只是HTML + CSS – user3009924

也許你可以嘗試使用'max-height'和'max-width'並設置'overflow：hidden'，但是這可能會在某些瀏覽器上顯示半個字母，具體取決於內容。 –

你不能用CSS做多於1行（至少不能以與大多數瀏覽器兼容的方式），但是如果你不想使用Javascript，你可以用PHP修剪它。

<?php 
function Truncate($string, $length=50, $stopanywhere=false) { 
    if (strlen($string) > $length) { 
     //limit hit! 
     $string = substr($string,0,($length -3)); 
     if ($stopanywhere) { 
      //cut off anywhere 
      $string .= '...'; 
     } else{ 
      //cut off after word 
      $string = substr($string,0,strrpos($string,' ')).'...'; 
     } 
    } 
    return $string; 
} 
?>

定義$字符串與您的文本，你想要的文本有限。

來源

2014-04-28 14:37:15 Vikestart

Yea mate我沒有問題限制它的PHP，問題是這是一個代碼給我的朋友，他想要限制它通過CSS/HTML，是不是有辦法通過寬度/高度或其他？ – user3009924

目前有沒有辦法使用純CSS來做到這一點，並添加省略號，這一點在所有現代瀏覽器中都是兼容的。至少不是沒有使用CSS「黑客」即是。嘗試某人在您的問題的評論中發佈的鏈接。不能保證它會產生可靠的結果。 – Vikestart

CSS - 文本溢出：省略號修復

回答

相關問題