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

Posted 2023-03-07

【中文标题】带有截断文本的 flex 布局的 Tailwind css

【英文标题】：Tailwind css with flex layout with truncated text

【发布时间】：2021-12-31 09:11:29

【问题描述】：

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

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

在此先感谢

启

【参考方案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>

【讨论】：

这比预期的要容易。非常感谢尼科

【参考方案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>

希望对你有帮助