CSS: Dynamically Text Truncate

YURII DE. - Jun 5 '22 - - Dev Community

DEMO: https://jsfiddle.net/bc6ep913/

PREVIEW

Image description

HTML

<div class="wrap">
  <div class="text-truncate">
    The glory and freedom of Ukraine has not yet perished
Luck will still smile on us brother-Ukrainians.
Our enemies will die, as the dew does in the sunshine,
and we, too, brothers, we'll live happily in our land.
  </div>
</div>
<div class="wrap">
  <div class="text-truncate">
    The glory and freedom of Ukraine has not yet perished
Luck will still smile on us brother-Ukrainians.
Our enemies will die, as the dew does in the sunshine,
and we, too, brothers, we'll live happily in our land.
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.text-truncate {
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .