No ellipsis is being shown when text overflowing

Issue

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>

Solution

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>

Answered By - dippas