text-overflow: wielokropek na pierwszej linii, gdy łamie linia

Question

Mam div z 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.

Ale jeśli zostanie użyte powyższe CSS, treść div zostanie zerwana, a także bez three dots //as of text-overflow: ellipsis;. Jeśli usuniemy word-break: break-all;, zostaną utworzone dwie linie z pierwszym słowem na pierwszej linii i drugim na drugiej. Ale działa z tym text-overflow: ellipsis;.

Co mogę zrobić, aby zachować cały tekst w jednym wierszu, a także sprawić, aby text-overflow: ellpsis; działało?

Dzięki!

Answer 1

white-space: nowrap; Jest to, czego potrzebujesz, wierzę.