【开发笔记】td标签内容过长时解决办法

    

    开发模块功能中遇到了td内容长度过长导致布局窜位，把其他td的内容挤在一起的问题，

    于是尝试了几种方式：

1. 设置固定的td宽度，发现当内容超出td宽度范围内时还是会窜位，失败。

   例：<td width = "15px">

2. 设置td百分比，同上也行不通。

   例：先在上级标签设置<tr width = "100%">

       然后设置<td width = "15%">

3. 在td里面写一个div标签，在里面写如下属性

   <div   style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">+内容+</div>   

   overflow:hidden;   隐藏超出范围的数据不显示
   text-overflow:ellipsis;   超出的数据显示为 .......
   white-space:nowrap;    超出的数据不换行

   但是使用之后发现也行不通，不知道是环境的问题还是写法不对。

   
   

4. 最后是使用JS的方式来判断，字符超过限制时分割字符串，代码如下（设置上限为40字符）：

   
   

   var  变量名 = 从后台获取的值;

    if(变量名.length > 40){

        变量名=变量名.substring(0,39)+"...";

    }

    然后td标签

    <td width = "35%"> + 变量名 + </td>

   测试后可用，效果如下：

    不超过40字符时：

    

    超过40字符时：

    问题解决~

转载于:https://blog.51cto.com/xiaoyanhongru/1952910