一、单行文本
width:XXXpx;overflow: hidden; //溢出隐藏 text-overflow: ellipsis; //显示省略号来代替被修剪的文本 white-space: nowrap; //不换行
注:white-space:normal(默认,空白会被浏览器忽略)|pre(空白会被浏览器保留,行为方式如同<pre>标签)|nowrap(文本不换行,直到遇到<br />标签)|pre-wrap(保留空白并正常换行)|pre-line(合并空白并换行)|inherit(继承);
二、多行文本
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 。 -webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数 -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 。
时间: 2024-10-05 07:38:20