On css: if text line is break show dots

Issue

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>

Solution

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/

Answered By - verbanicm