CSS: Dynamically Text Truncate

falselight

YURII DE.

Posted on June 5, 2022

CSS: Dynamically Text Truncate

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
💖 💪 🙅 🚩
falselight
YURII DE.

Posted on June 5, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related