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

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>

score 164 · Accepted Answer · edited Mar 31 '20 at 21:30

164

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/

edited Mar 31 '20 at 21:30

Jeremie Ges

2,747
3
22
37

answered Jul 25 '13 at 20:54

verbanicm

2,406
1
14
9

30

Don't forget the normal 'overflow: hidden' bit for this to become active. http://quirksmode.org/css/user-interface/textoverflow.html – watermanio Jul 25 '13 at 20:55
Your fiddle is also not showing the correct output. look at third div's content – Sachin Jul 25 '13 at 20:57

mdnfiras · Answer 2 · 2015-09-13T10:01:06.480

20

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

edited Sep 13 '15 at 10:01

answered Sep 13 '15 at 09:53

mdnfiras

882
1
15
28

score 8 · Answer 3 · answered Jul 25 '13 at 20:54

You're looking for text-overflow: ellipsis; - you need to specify it on the <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/

score 3 · Answer 4 · answered Jul 31 '20 at 07:32

You can use text-overflow: ellipsis; in css file. for example:

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

.short-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

<div>apple</div>
<div>jack fruit</div>
<div class="short-text">super puper long title for fruit</div>
<div>watermelon</div>


<span class="short-text">should look like this...</span>

On css: if text line is break show dots

4 Answers4

Linked