JSFiddle - React, Tailwind, and code Playground

by Daniel Tony

HTML

<h1>Without white-space:</h1>
<div style="width: 500px; border: 1px solid #ccc;">
  <div style="display: flex;">
    <div style="background: red;">ABC</div>
    <div style="background: blue;">ABC</div>
    <div style="flex: 1; background: white;">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium sunt quo sapiente possimus autem?
      </div>
    </div>
    <div style="background: green;">ABC</div>
  </div>
</div>

<h1>With white-space:</h1>
<div style="width: 500px; border: 1px solid #ccc;">
  <div style="display: flex;">
    <div style="background: red;">ABC</div>
    <div style="background: blue;">ABC</div>
    <div style="flex: 1; background: white;">
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium sunt quo sapiente possimus autem?
      </div>
    </div>
    <div style="background: green;">ABC</div>
  </div>
</div>

<h1>What I want to achieve:</h1>
<div style="width: 500px; border: 1px solid #ccc;">
  <div style="display: flex;">
    <div style="background: red;">ABC</div>
    <div style="background: blue;">ABC</div>
    <div style="flex: 1; background: white;">
      <div style="max-width: 400px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium sunt quo sapiente possimus autem?
      </div>
    </div>
    <div style="background: green;">ABC</div>
  </div>
</div>