Text-overflow: ellipsis for the first line when breaking lines

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 previous CSS , the 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 the first word in the first line, and the second in the second. But text-overflow: ellipsis; works with that.

What can I do to save text on one line, and also make text-overflow: ellpsis; ?

Thanks!

Answer 1

white-space: nowrap; I believe you.