Compacting very long text inside table row in html-CodePudding

I'm building html tables where some of the <td> can hold extremely long text. Can I wrap it like after 100 chars it has "..." and maybe on click it would reveal the whole text?

If possible I do like to keep this current style config and just add this feature.

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid #000000;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #b4cfd8;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #b4cfd8;
  width: 30%;
}

<body style="background-color: #cff0fa;">
  <table>
    <tr>
      <td>NServiceBus.MessageId</td>
      <td>aaa70f-246a-426c-8b76-ae4d00a381cc</td>
    </tr>

    <tr>
      <td>NServiceBus.ExceptionInfo.StackTrace</td>
      <td>System.InvalidOperationException: very very very very very very long text very very very very very very long text very very very very very very long text very very very very very very long text</td>
    </tr>
  </table>
  <hr>
</body>

CodePudding user response：

Yes, you can wrap the "super long text" inside a div then assign this styles to the div. white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

  td div {
      white-space: nowrap; 
      width: 200px;       
      overflow: hidden;
      text-overflow: ellipsis;
    }

<table border>
  <tr>
  <td>
    <div>
  lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long.
    </div>
</td>
  <td>
    <div>lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long.
    </div>
</td>    
  
</tr></table

Update

Shrink on click

const tds = document.querySelectorAll('td div');
tds.forEach(td => {
  td.addEventListener('click', () => {
    td.classList.toggle('shrink')
  })
})

table {
  width:900px;
}  
td {
  width:50%
}
.shrink {
  white-space: nowrap; 
  width: 200px;       
  overflow: hidden;
  text-overflow: ellipsis;
}
p.info {
  font-weight: bold;
}

<p >Click on text in a table cell to reduce text...</p>
<table border>
  <tr>
    <td>
      <div >
        lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long.
      </div>
    </td>
    <td>
      <div >lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long. lorem ipsum super long.
      </div>
    </td>      
  </tr>  
</table>