文字超出长度隐藏,显示省略号

简介:

表格:


table{

  table-layout: fixed;

}

}

t

td{

 

   white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

}


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

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

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

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

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



     本文转自aaron428 51CTO博客,原文链接:http://blog.51cto.com/aaronsa/1743904,如需转载请自行联系原作者



相关文章
|
5月前
span标签显示固定长度显示省略号,光标放上显示全部
span标签显示固定长度显示省略号,光标放上显示全部
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
|
5月前
|
前端开发
文字不换行超出后左右滑动
文字不换行超出后左右滑动
34 0
|
5月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
115 0
文本超出显示省略号--截取字段
文本超出显示省略号--截取字段
|
10月前
多行文本溢出显示省略号
多行文本溢出显示省略号
46 0
|
前端开发 JavaScript API
固定元素宽度根据文本的长度缩小字号,超出缩小字号
固定元素宽度根据文本的长度缩小字号,超出缩小字号
335 0
固定元素宽度根据文本的长度缩小字号,超出缩小字号
|
Web App开发 存储 弹性计算
div中文字超过指定数量后不显示并且以省略号结尾
div中文字超过指定数量后不显示并且以省略号结尾
309 0
div中文字超过指定数量后不显示并且以省略号结尾
span标签溢出元素设置省略号
span标签溢出元素设置省略号
125 0
|
前端开发
解决字母或数字溢出盒子(文字超出时不自动换行)
解决字母或数字溢出盒子(文字超出时不自动换行)
304 0
解决字母或数字溢出盒子(文字超出时不自动换行)