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

开发模块功能中遇到了td内容长度过长导致布局窜位，把其他td的内容挤在一起的问题，
于是尝试了几种方式：

设置固定的td宽度，发现当内容超出td宽度范围内时还是会窜位，失败。
例：<td width = "15px">

设置td百分比，同上也行不通。
例：先在上级标签设置<tr width = "100%">

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

在td里面写一个div标签，在里面写如下属性
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">+内容+</div>
overflow:hidden; 隐藏超出范围的数据不显示
text-overflow:ellipsis; 超出的数据显示为 .......
white-space:nowrap; 超出的数据不换行
但是使用之后发现也行不通，不知道是环境的问题还是写法不对。

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

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

if(变量名.length > 40){
变量名=变量名.substring(0,39)+"...";
}

然后td标签

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

测试后可用，效果如下：
不超过40字符时：





超过40字符时：





问题解决~