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>