博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现文字超出长度隐藏,显示省略号
阅读量:6619 次
发布时间:2019-06-25

本文共 461 字,大约阅读时间需要 1 分钟。

hot3.png

表格:

复制代码

table{  table-layout: fixed;}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 将被隐藏的那部分用省略号代替。

转载于:https://my.oschina.net/fannybelle/blog/201455

你可能感兴趣的文章
Yii2 模板布局使用
查看>>
linux常用命令大全
查看>>
使用JScript编译指定目录下所有工程
查看>>
CodeBlocks生成指定的库文件名
查看>>
事务的ACID特性
查看>>
php上传不到文件(Linux 服务器)
查看>>
将Vuforia程序发布到Windows10系统的基本流程
查看>>
centos7.2 环境下 mysql-5.1.73 安装配置
查看>>
在w3cschool学完html,css,javascript,jquery以后,还是不会做前端怎么办?
查看>>
二分查找
查看>>
angular 单页应用程序实现浏览器后退按钮跳转到前一页面,优化用户体验
查看>>
CSS3选择器用法小结
查看>>
iphone 源码推荐:BASequenceControl
查看>>
link-hover-visited-active
查看>>
用ie调试的时候显示:脚本调试程序无法连接到目标进程,已附加调试程序。...
查看>>
Sybase 出错解决步骤
查看>>
母函数问题【转】
查看>>
Hadoop之mapreduce 实例二
查看>>
【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别
查看>>
数据库编程
查看>>