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!

Answer 1

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