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"
        
      >
        <!-- 1. Table column -->
        <div >
          <div >
            <div>
              <p >ProtoPrograma</p>
              <p >
                [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 >
          <div>
            <p >
              1.3.2019 - v6
            </p>
            <p ></p>
          </div>
        </div>
      <!-- Draw line -->
      <div ></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

CodePudding user response：

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 >
          <p >ProtoPrograma</p>
          <p >[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>