Question

css text ellipsis one by one from right to left, instead of all at the same time

When I shrink the screen all elements become ellipsis. Is there a way to change this behavior? I want them to be ellipsis one by one from right to left. The third item should disappear first, the second - second, and then the first one.

I am open to changing the layout, as long as I can keep them in one row and align them in the middle vertically of the container (whatever they contain, this is why I used flexbox). If possible without JavaScript

.container {
  display: flex;
  align-items: center;
}

.item,
.inner {
  /*without inner wrapper the text won't break into ellipsis, because of the .container flexbox*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="container">
  <div class="item">
    <div class="inner"> First item with long text </div>
  </div>
  <div class="item">
    <div class="inner"> Second item with even longer text </div>
  </div>
  <div class="item">
    <div class="inner"> Third item </div>
  </div>
</div>

 2  50  2
1 Jan 1970

Solution

 0

Your desired behavior sounds a lot like a single line of text! I don't know what other styles you have in mind for the elements, but maybe this will do the trick for you?

@keyframes resize {
  from { width: 100%; }
  to { width: 20%; }
}

.container {
  animation-name: resize;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item1 {
  background-color:pink;
}
.item2 {
  background-color:lime;
}
.item3 {
  background-color:aqua;
}
<div class="container">
  <span class="item1"> First item with long text </span>
  <span class="item2"> Second item with even longer text </span>
  <span class="item3"> Third item </span>
</div>

2024-07-25
Bj&#246;rn Br&#228;ndewall