Truncate element inside flex child

using min-width: 0; on the flex child who's the container for the element that needs to be truncated (using: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;)

by Konstantin Rouda

HTML

<ul class="c-list">
  <li class="c-list__item">
  <p>someverylongtextsomeverylongtext someverylongtext that should be truncated.</p>
  </li>
</ul>

CSS

* {
  box-sizing: border-box;
}

.c-list {
  display: flex;
/*   width: 300px; */
  margin: 0;
  padding: 0;
  border: 1px solid firebrick;
  resize: both;
  overflow: auto;
}

.c-list__item {
  background: hsla(100, 50%, 95%, 1);
  min-width: 0;
}

.c-list__item P  {
    overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

var splittedTextItems = "someverylongtextsomeverylongtext someverylongtext that should be truncated".replaceAll(/\w/g, "<span class=\"o-letter\">$0</span>");