SCSS

by BaronGrivet

HTML

<div class="grandparent">
  <div class="parent small">
   1
  </div>
  <div class="parent">
    <div class="child no-wrap">
     Far too much text here. I mean seriously, why would you need this much text? It just goes on and on about nothing - nothing I tell you, what is even the point of it being this long and unwieldly?
    </div>
    <div class="child small">
     X
    </div>
  </div>
</div>

SCSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.grandparent, .parent {
  display: flex;
}

.small {
  width: 1em;
  margin: 0 10px;
  overflow: hidden;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}