表内意外的省略号/截断行为答案

【问题标题】：Unexpected ellipsis/truncate behavior inside of table表内意外的省略号/截断行为
【发布时间】：2022-11-28 15:48:13
【问题描述】：

我正在尝试截断表格内的一些文本，但它没有按预期工作。有人可以向我解释我做错了什么吗？

<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>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

灵感来自this answer。同一问题的其他答案也可能有助于您理解所涉及的问题。你必须将我的 vanilla CSS 翻译成 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>

【讨论】：