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

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!