CODEWITHSUNDEEP
htmlcss
beth
beth

Reputation: 95

text-overflow: ellipsis isn't working-why?

This overflow ellipsis doesn't seem to be working and it looks like documentation examples what am I doing wrong?

Fiddle

p {
  width: 100px;
  height: 100px;
  word-break: break-all;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>
  sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

Upvotes: 0

Views: 373

Answers (2)

VISHAL SINGH
VISHAL SINGH

Reputation: 661

We are using text-overflow: ellipsis; for dotted if width overflow the width and white-space: nowrap; without using nowrap "dotted effect will not work"

p{
  width: 100px;
  height: 50px;
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis; 
  white-space:nowrap;
}
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

Upvotes: 0

dippas
dippas

Reputation: 60563

you are missing white-space: nowrap; also word-break: break-all isn't necessary in this case.

p{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<p>
Some long text it is going to be ellipsed 
</p>

if you are going to have a long word without spaces then you don't even need white-space: nowrap;

p{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

Upvotes: 2

Related Questions