CSS Text-overflow Ellipsis Not Displaying Correctly

Question

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

TestingTesting TestingTestingTestingTesting

TestingTesting TestingTesting TestingTesting

lehel · Accepted Answer · 2017-07-06 12:26:39Z

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

Prince Sodhi · Accepted Answer · 2017-07-06 12:28:26Z

.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

Santhoshkumar · Accepted Answer · 2017-07-06 12:31:08Z

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>

brijrajsinh · Accepted Answer · 2017-07-06 12:33:32Z

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>

Collectives™ on Stack Overflow

CSS Text-overflow Ellipsis Not Displaying Correctly

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related