1

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Shahar
  • 461
  • 5
  • 16
  • Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) – rawnewdlz Mar 21 '22 at 21:56

1 Answers1

1

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 class="info">Click on text in a table cell to reduce text...</p>
<table border>
  <tr>
    <td>
      <div class="">
        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 class="">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>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79