页面内容多行是折行显示

这个问题可以用css或者js都可以解决。下面我说一下css的方法:

   这个是html:(举例)

  <div>美国能源信息署(EIA)周三(1月13日)公布最新的库存数据显示,截至1月8日当周,美国原油库存小幅增加,增幅远低于预期。</div>

有时候两行显示,其余的需要省略号填充。那么它的css这样来写了

div{

  display:-webkit-box;//必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

  -webkit-box-orient: vertical;//必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

  text-overflow: ellipsis;//可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

  overflow: hidden;

  -webkit-line-clamp: 2;//这个数字指的就是第几行开始省略。

}

这种方法普遍用在移动端或者内核为WebKit的浏览器。

原文地址:https://www.cnblogs.com/feixuelianyi/p/5258671.html