Unexpected ellipsis/truncate behavior inside of table

Question

I am trying to truncate some text inside of a table, however it isn't working as expected. Could someone explain to me what I am doing incorrectly?

Edit: I want to keep the table width as max-width: 100%;

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-56 overflow-x-hidden">
  <div class="table max-w-full border-spacing-y-5 border border-red-200">
    <div class="table-row"> 
      <div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
        This
      </div>
      <div class="table-cell pr-5 border border-green-200">
        is 
      </div>
      <div class="table-cell pr-5 border border-orange-200">
        the
      </div>
      <div class="table-cell border border-purple-200 overflow-y-hidden">
        <div class="flex">
          <span class="truncate">text to truncate</span>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Expected Results:</p>

<div class="flex w-36">
  <span class="truncate">This is the text to truncate</span>
</div>

Answer 1

Inspired by this answer. Other answers to this same question may also help you understand the issues involved. You’ll have to translate my vanilla CSS into Tailwind.

.my-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-table {
  width: 100%;
  table-layout: fixed;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-56 overflow-x-hidden">
  <div class="table max-w-full border-spacing-y-5 border border-red-200 my-table">
    <div class="table-row"> 
      <div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
        This
      </div>
      <div class="table-cell pr-5 border border-green-200">
        is 
      </div>
      <div class="table-cell pr-5 border border-orange-200">
        the
      </div>
      <div class="table-cell border border-purple-200 overflow-y-hidden my-truncate">
          text to truncate
      </div>
    </div>
  </div>
</div>

<p>Expected Results:</p>

<div class="flex w-36">
  <span class="my-truncate">This is the text to truncate</span>
</div>