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

我认为问题是由单词的长度引起的＆＃34; TestingTestingTestingTestingTestingTesting＆＃34; 使用自动换行（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

  

试试这个它适用于所有浏览器，它将在两行之后省略。

＆＃13;

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;