为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字。这在列表条目,题目,名称等地方常用到。
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;
完结!