CODEWITHSUNDEEP
css
Dave
Dave

Reputation: 2018

No ellipsis is being shown when text overflowing

I am trying to add ellipsis whenever text is overflowing, for some reason it wont show. What am I doing wrong?

.test {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

.text {
  text-overflow: ellipsis;
}
<div class="test">
  <div class="text">
    dwada wad kowda dwak waodk
  </div>
</div>

Upvotes: 0

Views: 41

Answers (1)

dippas
dippas

Reputation: 60553

The properties that make ellipsis appear need to be in the element you want them to show

.test {
  width: 100px;
}

.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="test">
  <div class="text">
    dwada wad kowda dwak waodk
  </div>
</div>

Upvotes: 3

Related Questions