这次给大家带来table表格里怎样增加省略号功能，table表格里增加省略号功能的注意事项有哪些，下面就是实战案例，一起来看一下。
1.起因
接到需求，说如果 table 里的字太多就用省略号，很自然就想到 text-overflow:ellipsis (，注意：overflow: hidden; text-overflow:ellipsis; white-space:nowrap 一定要一起用)，但是在 table 中不起作用，立即百度，说要想起作用需给 table元素 设定 table-layout: fixed ，果然起作用了。
2. text-overflow:ellipsis 起作用的前提
一定要给容器定义宽度（重点）
如果少了overflow: hidden;文字会横向撑到容易的外面
如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉
如果少了 text-overflow:ellipsis; 多余的文字会被裁切掉，就相当于你这样定义 text-overflow:clip
3.上面重点的前提
一定要给容器定义宽度，这就是 table-layout: fixed 起作用，而 table-layout: auto(table元素默认 auto ) 不起作用的原因，下面一段来自 css2.1 中文版规范：
‘table-layout’
Value: auto | fixed | inherit
Initial: auto
Applies to: ‘table’和’inline-table’元素
Inherited: no
Percentages: N/A
Media: visual
Computed value: 与指定值相同
‘table-layout’属性控制用于表格单元，行和列布局的算法。值含义如下：
fixed: 用固定表格布局算法
auto: 用任意自动表格布局算法
(fixed和auto区别就是一个固定，一个自动)
下文描述了这两种算法:
在固定表格布局算法中(fixed)，每列的宽度由下述规则决定：
一个 width 属性值不为’auto’的列元素所在的列宽度就设置为该宽度值
否则，由第一行中 width 属性值不为’auto’的单元格确定该列的宽度。如果单元格跨越了多列，就把宽度分到这些列中(the width is divided over the columns)
所有剩余列均分剩余的水平表格空间 (减去边框或单元格间距)
3中说到，所有剩余列均分剩余的水平表格空间，实际情况就是table将剩余列的宽度平均分，固定每列的宽度就是 剩余宽度/剩余列数 ，text-overflow:ellipsis 起作用的前提就是一定要给容器定义宽度，所以fixed起作用了
在自动表格布局算法中(fixed)，列宽由下列步骤决定：
计算每个单元格的最小内容宽度(MCW)：格式化的内容可以跨越任意多行，但不能从单元格溢出。如果单元格指定的’width'(W)大于MCW，W就是最小单元格宽度。’auto’值表示MCW是最小单元格宽度，然后，计算每个单元格的“最大”宽度：格式化内容，不考虑除显式换行外的换行
对于每一列，从只跨越该列的单元格中确定一个最大和最小列宽。最小列宽是最小单元格宽度中最大的那个所需要的最小列宽（或者列’width’，看哪个更大）。最大列宽是最大单元格宽度中最大的那个所需要的最大列宽（或者列’width’，看哪个更大）
对于每个跨越多列的单元格，增加它跨越的列的最小宽度，让它们至少与单元格一样宽。对于最大宽度也这样处理。如果可能的话，把跨越的所有列再扩宽差不多相同宽度
对于每个’width’不为’auto’的列组元素，增加它跨越的列的最小宽度，让它们至少与列组的’width’一样宽
其实有些事很简单，但是说起来就是绕嘴。。。
1中说到，如果单元格指定的’width'(W)大于MCW，W就是最小单元格宽度。’auto’值表示MCW是最小单元格宽度。
**情况一：当W > MCW时，W是最小单元格宽度，说明 列宽 = W，列宽 装得下文字，用不上省略号。
情况二：当W **
要想在不使用table-layout:fixed的情况下，即table-layout:auto前提下用ellipsis，可以像下面这样做(在td里再套一个元素，对这个元素设置ellipsis)
div { width: 100px;}.ellipsis { text-overflow:ellipsis; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;}... xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
怎样使用伪元素first-letter让文字首字母大写
css的Counters属性详解
JavaScript的函数重载详解
前后端数据应该如何科学交互
以上就是table表格里怎样增加省略号功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2899833.html
