Tailwind CSS 具有弹性布局和截断文本

Question

我在 flex 实用程序的帮助下使用 tailwind css 创建了一个页面布局。现在我正在努力解决一个问题。

右侧有一个标题部分，其中包含标题和说明。

我现在希望描述永远不会占用超过 100% 的宽度，并且如果有更多宽度，则会自动截断文本。

我准备了一个工作示例来演示我的问题：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex bg-blue-100 h-screen">
  <div class="bg-green-100 w-16 flex-none">A</div>
  <div class="bg-blue-100 w-96 flex-none">SB</div>
  <div class="bg-red-100 flex-auto">
    <div class="flex flex-col">
      <div class="flex flex-col space-y-2 bg-pink-100 p-3">
        <h1 class="bg-yellow-100">Title</h1>
        <h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
      </div>
      <div class="bg-pink-200 p-3">...</div>
    </div>
  </div>
</div>

如果有人可以帮助我解决这个问题，那就太好了。

提前谢谢了

凯

Answer 1

只需将“溢出隐藏”添加到第三列即可。

<div class="flex bg-blue-100 h-screen">
  <div class="bg-green-100 w-16 flex-none">A</div>
  <div class="bg-blue-100 w-96 flex-none">SB</div>
  <div class="bg-red-100 flex-auto overflow-hidden">
    <div class="flex flex-col">
      <div class="flex flex-col space-y-2 bg-pink-100 p-3">
        <h1 class="bg-yellow-100">Title</h1>
        <h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
      </div>
      <div class="bg-pink-200 p-3">...</div>
    </div>
  </div>
</div>