CSS文本溢出省略號顯示不正確

Question

我有一個<p>標記來顯示一些信息，但它應該被限制爲2行，如果文本更大，那麼它應該在末尾顯示「...」。我嘗試了很多解決方案，但我無法獲得我正在尋找的東西。我已經嘗試在CSS下面。

.mw { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    line-height: 20px;  
    max-height: 40px;  
    width:100px; 
    border:1px solid #ccc; 
} 

，但我得到了三種不同的文本三種不同的輸出在<p>。

TestingTestingTestingTestingTestingTesting

TestingTesting TestingTestingTestingTesting

TestingTesting TestingTesting TestingTesting

Answer 1

我認爲這個問題是由字（S） 「TestingTestingTestingTestingTestingTesting」 使用自動換行（word-wrap: break-word;）的長度引起的將緩解該問題：example here

Answer 2

.mw { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    display: block; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-line-clamp: 2; 
 
    line-height: 20px;  
 
    max-height: 40px;  
 
    width:100px; 
 
    border:1px solid #ccc; 
 
}

<p class="mw"> 
 
    TestingTestingTestingTestingTestingTesting 
 
</p>

使用display: block截斷。

注：clamp CSS將無法在Firefox和IE

工作

編號：https://caniuse.com/#search=clamp

Answer 3

添加word-break: break-all;。

.mw { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-line-clamp: 2; 
 
    line-height: 20px;  
 
    max-height: 40px;  
 
    width:100px; 
 
    border:1px solid #ccc; 
 
    word-break: break-all; 
 
}

<p class="mw">TestingTestingTestingTestingTestingTesting</p> 
 

 
<p class="mw">TestingTesting TestingTestingTestingTesting 
 
</p> 
 

 
<p class="mw">TestingTesting TestingTesting TestingTesting</p>

Answer 4

試試這個可以在所有的瀏覽器後，兩行會省略號工作。

.mw { 
 
     display: block; 
 
     /* Fallback for non-webkit */ 
 
     display: -webkit-box; 
 
     max-height: 28pt; 
 
     /* Fallback for non-webkit */ 
 
     font-size: 10pt; 
 
     line-height: 1.4; 
 
     -webkit-line-clamp: 2; 
 
     -webkit-box-orient: vertical; 
 
     overflow: hidden; 
 
     -ms-text-overflow: ellipsis; 
 
     -o-text-overflow: ellipsis; 
 
     text-overflow: ellipsis; 
 
    }

<p class="mw">all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.all long text will come here.</p>