单(多)行文本溢出显示省略号...

一、单行文本

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; //设置或检索伸缩盒对象的子元素的排列方式 。

  

posted @ 2017-08-27 10:57  Candy-Yao  阅读(254)  评论(0编辑  收藏  举报