Tailwind css 带有截断文本的 flex 布局

Question

我在 flex 实用程序的帮助下使用 tailwind css 创建了一个页面布局。现在我正在为一个问题而苦恼。

右侧有一个带有标题和说明的 header 部分。

我现在希望描述永远不会超过 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

只需将 'overflow-hidden' 添加到您的第三列。

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

Answer 2

我建议你将 overflow-ellipsis 与 overflow-hidden 一起使用，这将帮助您描述永远不会占用超过 100% 的宽度，甚至有助于在平板电脑模式 (768px) 上轻松进行响应式设计

<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 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>

希望对你有所帮助

Tailwind css 带有截断文本的 flex 布局

Tailwind css with flex layout with truncated text

css

flexbox

tailwind-css