Tailwind CSS truncate destroys design - css

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>