datatable行内内容太长,有时不自动换行解决方法

加一个css属性即可

style = "word-wrap:break-word;"

js代码:

"render": function (data, type, full, meta) {
return '<p style="word-wrap:break-word;">' + data + '</p>'
}

但有时word-wrap会失效,原因如下:

  1.word-wrap对行内元素是没有效果的


     2.一般情况下,元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),可能是元素中设置的white-space是norwrap导致,无法换行。所以需要设置:    

white-space:normal;
word-break:break-all;

在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏,

overflow:hidden; 
white-space:nowrap;

 

(1)超过宽度和高度文字会自动隐藏

<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

 

(2)设置了td的宽度超过长度自动换行

<td>
<div style="width:100px;word-wrap:break-word;" >cvcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div>
</td>
 
posted @ 2019-02-25 16:40  y-xs  阅读(9425)  评论(0编辑  收藏  举报