将td中文字过长的部分变成省略号显示的小技巧

Posted 2023-04-24

参考技术A        不知道大家在写一些项目的时候有没有遇见这种需求。有时候我们需要将一行数据多余的部分转变成小点点显示，这样不至于因为数据太多影响外观，可以让数据在一行显示。

接下来就分别介绍在div和table两种情况下的效果实现

 table width:100%;table-layout:fixed;

table tr width:100%;height:30px;

table tr td text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

这样子就ok了！！！

如何将<td>文字过长的部分,变成省略号显示

我用Html的Table显示数据,
控制<td>里的显示

将<td>文字过长的部分,变成省略号显示方法如下：
在设置文字过长部分需要用到text-overflow标签，设置为 ellipsis，意思为文本超出部分为省略号；
同设置整体为本过长需要用white-space标签，设置为 nowrap，意思是文本不换行；
同时需要设置整体标签超出部分为不显示，设置方法为：overflow: hidden;
整体设置标签为：td text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 参考技术A 用css.
overflow: hidden; text-overflow:ellipsis本回答被提问者采纳 参考技术B

你是否使用响应式的Bootstrap,如果使用！请直接复制以下代码即可

table
 table-layout:fixed;

.table tbody tr td
   overflow: hidden; 
   text-overflow:ellipsis; 
   white-space: nowrap; 
 

参考技术C

参考一下这篇博客

通过增加列Class直接修饰td、th，首先定义一个文本超长自动省略的CSS Class

http://www.zhuyuan.tech/articles/7

Datatables 文字过长CSS省略