Tailwind CSS truncate destroys design

Issue

I am working on a table using Tailwind CSS, I have a long string, which I would like to truncate, but when I apply truncate the layout breaks

<div>
      <!-- START TABLE ROW -->
      <div
        id="tableRow"
        class="grid grid-cols-5 gap-4 border-2 border-transparent hover:border-2 hover:border-me-green hover:rounded-lg"
      >
        <!-- 1. Table column -->
        <div class="px-6 py-4">
          <div class="flex items-center space-x-3">
            <div>
              <p class="font-bold text-black my-2">ProtoPrograma</p>
              <p class="text-gray-400 text-sm font-roboto truncate w-[950px]">
                [Normal text] Suspendisse nec libero id ligula mollis
                ullamcorper quis vitae dui. Mauris vel. Neque porro quisquam est
                qui dolorem ipsum quia dolor sit...123, blah, blah, blah, blah, blah
              </p>
            </div>
          </div>
        </div>

        <!-- 2. Table column -->
        <div class="px-6 py-4">
          <div>
            <p class="text-xl font-roboto font-medium text-black">
              1.3.2019 - v6
            </p>
            <p class="text-me-gray text-sm font-roboto"></p>
          </div>
        </div>
      <!-- Draw line -->
      <div class="w-full border-t border-me-gray-2"></div>
      <!-- Draw line -->
      <!-- END TABLE ROW -->
</div>

Here is an example: https://play.tailwindcss.com/pEpWLfzCvl

The layout (when text is truncated) should look like this

but as soon as I apply truncate property, and assign insame width (there is probably a better way, then asigning large widths, maybe number of words or something,which I don't know)

the table layout gets completly broken

How can apply truncate so it will truncate text and not break the layout along the way?

Thanks for Anwsering and Best Regards

Solution

Adding w-full on the parent div and delete the fixed width 950px fix the problem. If you need to truncate with multiple line you can npm install @tailwindcss/line-clamp and adding line-clamp class.

If you do not want to install extra package, you can just add -webkit-line-clamp property into css stylesheet.

Example:

<div class="w-full">
          <p class="my-2 font-bold text-black">ProtoPrograma</p>
          <p class="font-roboto text-sm text-gray-400 line-clamp-6">[Normal text] Suspendisse nec libero id ligula mollis ullamcorper quis vitae dui. Mauris vel. Neque porro quisquam est qui dolorem ipsum quia dolor sit...123, blah, blah, blah, blah, blah</p>
 </div>

Answered By - saboshi69