why text-overflow ellipsis doesn't work code example

Example 1: overflow ellipsis css

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Example 2: hiding text css and leaving whitespace

visibility: hidden;