CODEWITHSUNDEEP
htmlcssweb
Khushal Dugar
Khushal Dugar

Reputation: 231

CSS Text-overflow Ellipsis Not Displaying Correctly

I have a <p> tag to display some information but it should be restricted to 2 lines and if the text is greater then it should show "..." at end. I tried many solutions but i am not able to get exactly what i am looking for. i have tried below 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;
}

but i am getting three different outputs for three different text in <p>.

TestingTestingTestingTestingTestingTesting
enter image description here

TestingTesting TestingTestingTestingTesting
enter image description here

TestingTesting TestingTesting TestingTesting
enter image description here

Upvotes: 1

Views: 350

Answers (4)

brijrajsinh
brijrajsinh

Reputation: 453

Try this it will work on all browsers it will ellipsis after two lines.

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

Upvotes: 0

Santhoshkumar
Santhoshkumar

Reputation: 780

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

Upvotes: 0

Prince Sodhi
Prince Sodhi

Reputation: 2955

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

use display: block for truncation.

NOTE: clamp css will not work on Firefox and IE

Ref: https://caniuse.com/#search=clamp

Upvotes: 0

lehel
lehel

Reputation: 451

I think the issue is caused by the length of the word(s) "TestingTestingTestingTestingTestingTesting" Using word-wrap (word-wrap: break-word;) would alleviate the issue: example here

Upvotes: 2

Related Questions