Tailwind css with flex layout with truncated text-CodePudding

i created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.

On the right side there is a header section with title and description.

I want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.

I prepared a working example to demonstrate my problem:

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

It would be super nice if someone could help my by solving this problem.

Many thanks in advance

Kai

CodePudding user response：

Just add 'overflow-hidden' to your third column.

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

CodePudding user response：

I suggest you use overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily

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

I hope helped you