On css: if text line is break show dots

Question

I seen before this solution but i not remember where exactly... without JS

maybe it's work when line is break. But what a css property is?

Question is: how to show for user: dots, if text longer than 150px

DEMO

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

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

Answer 1

Are you talking about an ellipsis? Add this to your CSS

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

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

Answer 2

In order for text-overflow: ellipsis to work you must also specify a width (or a max-width), white-space: nowrap and overflow: hidden

The element must be a block so make sure to use display: block or display: inline-block on inline elements.

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