请使用firefox,chrome等最新浏览器浏览本站。

自适应表格实现溢出文本显示省略号

css3 阿豹 512次浏览 1个评论 扫描二维码

之前写过关于溢出文本显示省略号的文章。主要是针对P,div标签。但是在table中效果却不尽人意。
解决table中问题,需要给table加上table-layout: fixed。
table-layout: fixed的作用在于,让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。
查看demo

下面介绍一下实现省略号的方法
实现单行文本显示省略号:

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

实现多行文本显示省略号:
查看demo

.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2;//此处的数字表示需要几行显示省略号
-webkit-box-orient: vertical;
overflow: hidden;
}

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(1)个小伙伴在吐槽
  1. :razz: 使用好方便,达 :smile:
    ljh2014-11-06 17:53 回复