On css: if a text string is a multiple of the dots shown

Question

I saw this solution, but I don’t remember exactly where ... without JS

perhaps it works when the line is interrupted. But what is the css property?

Question: how to show the user: points if the text is longer than 150 pixels

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; } 

Answer 1

Are you talking about ellipsis? Add this to your CSS

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

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

Answer 2

Are you looking for text-overflow: ellipsis; - you need to point it to <div> in addition to white-space: nowrap; and 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

To work with text-overflow: ellipsis , you must also specify width (or max-width ), white-space: nowrap and overflow: hidden

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

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