На CSS: если текстовая строка перерыв показать точки

Question

я видел до этого решения, но я не помню, где точно ... без JS

может быть, это работа, когда линия перерыв) Но что 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; 
} 

Вопрос: как показать для пользовательских точек, если текст длиннее, чем 150px

Answer 1

Вы говорите о многоточие? Добавьте это в CSS

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

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

Answer 2

Вы ищете text-overflow: ellipsis; - вы должны указать его на <div> в дополнение к white-space: nowrap; и 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

Для работы text-overflow: ellipsis для работы Вы должны также указать width (или max-width), white-space: nowrap и overflow: hidden

Элемент должен быть блок поэтому убедитесь, что использовать display: block или display: inline-block на встроенных элементов.

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