No ellipsis is being shown when text overflowing-CodePudding

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 >
  <div >
    dwada wad kowda dwak waodk
  </div>
</div>

CodePudding user response：

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 >
  <div >
    dwada wad kowda dwak waodk
  </div>
</div>