Tailwind CSS truncate destroys design

Question

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

Answer 1

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>