CSS-使用省略號自動縮短長字符串

Question

嗨，我使用省略號縮短了長字符串，並在末尾放置了dotes（...）。問題是如果一個字符串包含空格，那麼我想先打破字符串，然後如果它溢出，然後把dotes（...）。例如。我有兩個字符串

Choreographers Farm Houses 

如果我不使用省略號然後調整窗口編舞重疊農莊......

，當我用省略號然後調整窗口，我得到

Choreogra... Farm Ho... 

我想要的是

Choreogra...  Farm 
        Houses 

而在屏幕更小的情況下

Chore...   Farm 
       Hous... 

小提琴：https://jsfiddle.net/7fpt4m5e/3/

Answer 1

取出white-space: nowrap ...雖然text-overflow擁有多

Updated fiddle

.block2 p { 
    overflow:hidden; 
    text-overflow:ellipsis; 
    width:98%; 
} 

檢查壞瀏覽器支持這個帖子，applying-an-ellipsis-to-multiline-text，在那裏你會找到更多的辦法如何

Answer 2

而是寫作的「農莊」你應該寫「Farm Houses」，這樣一來它要達到的效果。該解決方案還解答了壞支持的white-space: nowrap瀏覽器或文本溢出在所有瀏覽器

https://jsfiddle.net/7fpt4m5e/6/

作品，因爲它並不需要特別的支持。

Answer 3

不幸，text-overflow: ellipsis只會截斷單行。

但是，您可以在這裏執行的操作是使用line-clamp，它應該可以在Firefox瀏覽器的webkit瀏覽器&上運行。

這裏您提及要在哪個截斷髮生後要執行的行數-webkit-line-clamp & -moz-line-clamp。一個line-clamp使用的

例子是：

div { 
 
    max-height: 42px; 
 
    width: 40px; 
 
    margin-bottom: 10px; 
 
    font-size: 16px; 
 
    overflow: hidden; 
 
    color: #000; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    -moz-line-clamp: 2; 
 
    -moz-box-orient: vertical; 
 
}

<div>the quick brown fox jumps over the lazy dog</div> 
 
<div>the quick brown fox jumps over the lazy dog</div>

否則，你可以去柄，你自己的僞選擇與 - 內容 - （「...」 ）也是。