600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 【CSS用法】css限制一行文字数量 超出部分用省略号显示

【CSS用法】css限制一行文字数量 超出部分用省略号显示

时间:2024-05-21 11:12:39

相关推荐

【CSS用法】css限制一行文字数量 超出部分用省略号显示

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。

CSS代码:

text-overflow:ellipsis; // 用省略号

overflow:hidden; // 超出部分隐藏

white-space:nowrap; // 文本不换行,这样超出一行的部分被截取,显示...

说明:

text-overflow: 用来设置是否使用一个省略标记(···)标示对象内文本的溢出。

white-space:nowrap; 强制文本在一行内显示。

overflow:hidden; 溢出内容为隐藏。

必须三者同时用的时候才会实现溢出文本显示省略号

附:多行显示的方法:

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; // 设置显示几行

-webkit-box-orient: vertical;

完结!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。