用CSS3实现单行文本溢出和多行文本溢出

今天在做网页时,看到设计图上有 .....  ,又碰到一个问题,如何实现呢?使用js截取吗?太麻烦了,旁边的同事说:“可以用css3实现”,于是看手册,在网上搜集资料,这个问题终于解决了,在此想把这个结果分享给网友,望大家共勉。

文本溢出分为:

 

1.单行文本溢出 多用于文章列表标题

 

overflow:hidden;

white-space:nowrop;

text-overflow:ellipsis;


实现的效果:


2.多行文本溢出 多用于文章列表详情简介

 

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;


实现的效果:(这个是移动端的)

 


由于这是用css3实现的,当然不会兼容所有的浏览器,其中兼容的浏览器IE9,IE10,火狐,谷歌。

本文转载自:迹忆客(https://www.jiyik.com)

以上是 用CSS3实现单行文本溢出和多行文本溢出 的全部内容, 来源链接: utcz.com/z/289995.html

回到顶部