JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="box">
  <div class="text">
    <span>Very long title that should be shortened off with ellipsis</span>
  </div>
  <div class="block"></div>
</div>

CSS

.box {
  display: flex;
}
.text {
  _overflow: hidden;
  min-width: 0;
  background-color: cyan;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.text span {
  _display: inline-flex;
}

.block {
  width: 20px;
  background-color: cyan;
  margin-left: 2px;
}