text-overflow:ellipsis for the first line when line breaks

Question

I have a div with CSS:

div.c { font-size: 18px; color: #888; max-width: 300px; display: inline-block; overflow: hidden; line-height: 20px; text-overflow: ellipsis; word-break: break-all; }

The content in this div is "Abcdef abcdefabcdefabcdefabcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" //for example, given only to show length in div.

But if the above CSS is used, div content will be broken and also without three dots //as of text-overflow: ellipsis;. If i remove word-break: break-all; then two lines will be formed with first word on first line and second on second. But text-overflow: ellipsis; works with this.

What can i do to keep all the text on one line and also making text-overflow: ellpsis; work?

Thanks!

dezman · Accepted Answer · 2013-04-09 16:26:52Z

14

white-space: nowrap; Is what you need I believe.

answered Apr 9, 2013 at 16:26

dezman

19.6k13 gold badges58 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

text-overflow:ellipsis for the first line when line breaks

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related