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

[tuandj]

I have a div with CSS:\[code\]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;}\[/code\]\[code\]The content in this div is "Abcdef abcdefabcdefabcdefabcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" //for example, given only to show length in div\[/code\].But if the above \[code\]CSS\[/code\] is used, div content will be broken and also without \[code\]three dots //as of text-overflow: ellipsis;\[/code\]. If i remove \[code\]word-break: break-all;\[/code\] then two lines will be formed with first word on first line and second on second. But \[code\]text-overflow: ellipsis;\[/code\] works with this.What can i do to keep all the text on one line and also making \[code\]text-overflow: ellpsis;\[/code\] work?Thanks!