如何防止文本溢出单元格

Question

I am getting data from database and using that data creating row dynamically and attaching it to the table . My code is as follows

 function addSpecToTable(name,id,direction,template,deployed)
        {
            var tbody = document.getElementById('tblSpecList').getElementsByTagName('TBODY')[0];
            var row = document.createElement('TR');
            var td1 = document.createElement('TD');
            var td2 = document.createElement('TD');
            var td4 =document.createElement('TD');
            var td3 = document.createElement('TD');
            td1.style.width="40%";

            td1.style.paddingLeft="3px";
            td1.innerText=name;
            td2.style.width="20%";


            td2.style.paddingLeft="3px";

            td4.style.width="25%"
            td4.style.paddingLeft="3px"

            td3.style.width="15%"
            td3.style.paddingLeft="3px"

           row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td4);
            row.appendChild(td3);
            tbody.appendChild(row);

}

This name vareis in length.It's max length goes up to 70 characters. Bu after a certain characters it overshoot it's length and make table messy and that depends on characters for eg if it is all W then it's after the 32 W it will spoil the table structure so i want that before the text overshoot the length it shows ... and truncate rest of the character not fitting.

Answer 1

How about pure css resolution:

#tblSpecList td {
    /* essential */
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;

    /* for good looks */
    padding: 10px;
}

This will truncate long string and add 2 points at the end...

Answer 2

Use jquery to truncate string after certain length.

<script>
 $(document).ready(function(){
  if ($('.tdclass').text().length > 70)
  {
    $('.tdclass').text(     
    $('.tdclass').text().substring(0,70)+"..." );
      }
        });
</script>

Answer 3

hope it will help

var div = document.crateElement('div');
    div.className = 'name-wrapper'
    div.innerText=name;

    td1.appendChild(div);


.name-warpper {
    display:block;
    word-wrap:break-word;
    overflow:hidden;
    width:300px // give some value 
 }