Question

我从数据库获取数据并使用该数据动态创建行并将其附加到表中。我的代码如下

 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);

}

这个名称是vareis的长度。它的最大长度最多为70个字符。在某些字符之后它会超过它的长度并使表格变得混乱，这取决于字符，例如，如果它全部是W，那么在32 W之后它将破坏表格结构，所以我希望在文本超出它显示的长度之前。 ..并截断该字符的其余部分不合适。

Answer 1

纯css解析怎么样：

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

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

这将截断长字符串并在结尾添加2个点...

Answer 2

使用jquery在一定长度后截断字符串。

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

Answer 3

希望它会有所帮助

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 
 }

如何防止文本溢出单元格

3 个答案: