table TD 超出省略号

2019独角兽企业重金招聘Python工程师标准>>>

table{table-layout: fixed;
}td{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;
}

原理：

本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句CSS样式：

1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）

2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。

3. overflow: hidden 隐藏超出单元格的部分。

4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

兼容性：

Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版

转载于:https://my.oschina.net/yongqingfan/blog/670068

table TD 超出省略号相关推荐

td 超出宽度隐藏_table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示...
1,设置css样式 table { width: 100%; float: left; table-layout:fixed; width:600px; border:1px solid #ccc; ...
html table td过长-使用width设置td宽度
html table td过长解决办法页面需要显示一个table,列数比较多,导致无法一屏无法显示,导致需要左右拖动屏幕,十分不方便~ 于是,需要将较长的列分行显示,在td 处用style=&quo ...
element表格单行超出省略号
el-table单行超出省略号(show-overflow-tooltip加上这个属性就ok了) el-table中的某项超过一行多余的显示省略号,鼠标悬浮在上面所有内容会在悬浮的地放上方显示一行具 ...
php 文字超出画布,input实现文字超出省略号（代码示例）
本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. input实现文字省略号功能普通元素实现文字超出宽度自动变成省 ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
换行和禁止换行及超出省略号
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
input实现文字超出省略号功能
input实现文字省略号功能普通元素实现文字超出宽度自动变成省略号非常简单,给元素加个宽度,然后再加这三句css即可: white-space: nowrap;text-overflow: elli ...
CSS 在table td一段文字前面做一个空白小框，空白下划线
https://www.cnblogs.com/xiaobaizhiqian/p/8338308.html https://www.zhihu.com/question/395120933 预览 &l ...
html合并td边框线,使用css将table td边框合并为细边框
使用css将table td边框合并为细边框2017-12-13 22:07 还记得第一次使用table的时候,无论怎么弄,边框都不是自己想要的效果. 因为只想让框边成为一条细线,当时就在想有这么难吗 ...
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
场景重现无效场景一现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...

table TD 超出省略号

原理：

兼容性：

table TD 超出省略号相关推荐

最新文章

热门文章