CSS实现单行、多行文本溢出显示省略号(…

abcd232112个月前前端开发353

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。


实现方法:

overflow: hidden; 
text-overflow:ellipsis; 
white-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;


标签: 文本溢出

相关文章

css动画是可以暂停的

css动画是可以暂停的

css动画大家都不陌生,但是你知道css动画是可暂停的吗?如果你不知道就来看看吧。虽然用过很多次animation,但是也就前几天才知道动画是可以暂停的,可见自己对动画的了解还是不够深,一起来学习一下...

HTML5实现网页的全屏切换

使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下://进入全屏     func...

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom<div class="img-b...

实现checkbox 翻页后,仍保持选中状态

使用的技术 localStorage.setItem(key,val); localStorage.getItem(key); <input...

移动端自适应Rem自适应js

    当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12p...

flex布局设置单个子元素靠右

父元素设置了flex 布局display: flex; align-items: center;如何让某个子元素靠右呢?方法一flex: 1; text-a...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。