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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将<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省略

CSS如何隐藏td里面超出的文字?

参考技术A

display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

一般的文字截断(适用于内联与块):

.text-overflow
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/



参考技术B display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

以上是关于如何将<td>文字过长的部分,变成省略号显示的主要内容,如果未能解决你的问题,请参考以下文章

怎样td里面的字显示一行,不换行

将过长的文字改用省略号显示

table中的td限制宽度width也不能让字符过长变成省略号生效?

过长文字自动换行或者超长省略号显示

table td中的内容过长,显示为固定长度,多余部分用省略号显示

table中td内容过长 省略号显示