How to set a maximum length to the characters displayed in a

Question

 document.querySelector('#emails-view').innerHTML=`
                <table id="emails-table" class="table table-hover">
                  <thead class="thead-dark">
                    <tr>
                      <th>To</th>
                      <th>Subject</th>
                      <th>Text</th>
                    </tr>
                  </thead>
                  <tbody id="table-body">
                  </tbody>
                </table>  
                `
    
                for(var i=0;i<emails.length;i++){
                  let row = document.createElement('tr');
                  let cols = '<td>' + emails[i].recipients + '</td><td>' + emails[i].subject + '</td><td style="width:50%;"> ' + emails[i].body + '</td>';
                  row.innerHTML = cols;
                  document.getElementById('table-body').appendChild(row);
                }

I'm creating an emails table with JS, and I would like to set a lenght limit to the email text, followed by "...", so that the text stands only in 1 row, and doesnt take 4 rows like in the image.

This is the table :

I tried by modify the <td> style in this:

<td style="width:50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">

but still doesnt works, this is what happen:

How can I fix this? (I would like that the email text is the 50% of tha table width). Thank you!

chekout this [question](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — Moufeed Juboqji, Sep 04 '20 at 11:02

score 2 · Accepted Answer · edited Sep 04 '20 at 18:04

2

Try using:

str.substring(0,20)+"..."; }

It can solve your problem

edited Sep 04 '20 at 18:04

CoderUni

5,474
7
26
58

answered Sep 04 '20 at 11:12

mofiroz

66
8

Yes this is the easiest method way to solve, thx a lot! – sunhearth Sep 04 '20 at 12:57

Cem PEHLIVAN · Answer 2 · 2020-09-04T11:37:20.940

<table style="width: 100%; border-collapse: collapse" border="1">
  <thead>
    <tr style="background-color: #444; color: #fff">
      <th>To</th>
      <th>Subject</th>
      <th>Text</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>test@hotmail.it</td>
      <td>Test subject</td>
      <td style="width: 50%">
        <div style="display: flex">
        <span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;flex: 1; width: 10px">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
        </div>
      </td>
    <tr>
  </tbody>
</table>

Kaddath · Answer 3 · 2020-09-04T11:43:36.147

If that doesn't bother to have "To" and "Subject" the same size, you can use a combination of style="width: 100%; table-layout:fixed;" on the table (all columns will have the same width) and colspan="2" on the "Text" td. (you need the same colspans on the th too)

<table id="emails-table" class="table table-hover" style="width: 100%; table-layout:fixed;" border="1">
  <thead class="thead-dark">
    <tr>
      <th>To</th>
      <th>Subject</th>
      <th colspan="2">Text</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td>To</td>
      <td>Subject</td>
      <td colspan="2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td>
    </tr>
  </tbody>
</table>

You could have more "subdivisions" with colspan to adapt the size of "To" and "Subject" relatively (ex colspan colspan="3" on first td (width 3/8), colspan="1" on second (width 1/8) and colspan="4" on the last (width 4/8))

<table id="emails-table" class="table table-hover" style="width: 100%; table-layout:fixed;" border="1">
  <thead class="thead-dark">
    <tr>
      <th colspan="3">To</th>
      <th colspan="1">Subject</th>
      <th colspan="4">Text</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td colspan="3">To</td>
      <td colspan="1">Subject</td>
      <td colspan="4" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </td>
    </tr>
  </tbody>
</table>

How to set a maximum length to the characters displayed in a

3 Answers3