如何使用javascript缩短表的列数据并在特定限制后添加点

Question

I have a table

<table>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
<tr>
    <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td>
    <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td>
    <td>Lorem ipsum dolor</td>
    <td>Lorem ipsum dolor</td>
</tr>
</table>

now take class title i want to trim the data of title class and add (...) after a specific length using javascript there can be multiple <td> Help me

Answer 1

const titles = document.querySelectorAll('.title');
const titleLength = 15;
titles.forEach(el => {
  el.innerText = `${el.innerText.substring(0, titleLength)}...`;
})

explanation: substring.

Answer 2

Fetch the columns by class and substring the data and set it back.

 const tds = document.querySelectorAll('td.title') const length = 10; tds.forEach((e) => { e.innerText = e.innerText.substring(0, length) + '...'; })

 <table border="1"> <tr> <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td> <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td> <td>Lorem ipsum dolor</td> <td>Lorem ipsum dolor</td> </tr> <tr> <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td> <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td> <td>Lorem ipsum dolor</td> <td>Lorem ipsum dolor</td> </tr> <tr> <td class="title"> Lorem ipsum dolor sit amet consectecons sit amet consectecons </td> <td>Lorem ipsum dolor sit amet consectecons sit amet consecteconsLorem ipsum dolor sit amet consectecons sit amet consectecons</td> <td>Lorem ipsum dolor</td> <td>Lorem ipsum dolor</td> </tr> </table>