o CSS: jeśli linia tekstu jest przerwa pokaż kropki

Question

widziałem wcześniej tego rozwiązania, ale nie pamiętam gdzie dokładnie ... bez JS

może to praca, gdy linia jest przerwa) Ale co to jest własność css?

DEMO

<div>apple</div> 
<div>jack fruit</div> 
<div>super puper long title for fruit</div> 
<div>watermelon</div> 

div { 
font-family: Arial; 
background: #99DA5E; 
margin: 5px 0; 
padding: 1%; 
width: 150px; 
overflow: hidden; 
height: 17px; 
color: #252525; 
} 

Pytanie brzmi: jak pokazać dla użytkowników kropek jeśli tekst dłuższy niż 150 pikseli

Answer 1

Mówisz o wielokropkiem? Dodaj to do Twojego CSS

text-overflow: ellipsis; 
white-space: nowrap; 

Fiddle: http://jsfiddle.net/5UPRU/7/

Answer 2

Szukacie text-overflow: ellipsis; - trzeba określić go na <div> oprócz white-space: nowrap; i overflow: hidden;

div { 
    font-family: Arial; 
    background: #99DA5E; 
    margin: 5px 0; 
    padding: 1%; 
    width: 150px; 
    overflow: hidden; 
    height: 17px; 
    color: #252525; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

http://jsfiddle.net/5UPRU/4/

Answer 3

Aby zadziałało text-overflow: ellipsis należy również określić width (lub max-width), white-space: nowrap i overflow: hidden

Element musi być blokiem więc upewnij się, aby skorzystać display: block lub display: inline-block na elementach inline.

div { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}