html + CSS实现文字超出长度隐藏,显示省略号_html/css_WEB-ITnose
程序员文章站
2022-05-04 22:21:26
...
表格:
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 将被隐藏的那部分用省略号代替。
推荐阅读
-
想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose
-
html div内第二行文字显示不下的时候才用省略号代替 css实现
-
当页面内容溢出或超出边界时显示省略号_html/css_WEB-ITnose
-
想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose
-
CSS控制文本的长度,超过一行显示省略号_html/css_WEB-ITnose
-
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号_html/css_WEB-ITnose
-
图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏_html/css_WEB-ITnose
-
CSS- 文本超出指定宽度后隐藏并显示为省略号_html/css_WEB-ITnose
-
div中img根据不同分辨率居中显示,超出部分隐藏_html/css_WEB-ITnose
-
CSS控制文本的长度,超过一行显示省略号_html/css_WEB-ITnose