单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言. 好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例 @mixin ellipsis($lineCount: 2) { text-overflow: -o-ellipsis-lastline; overflow: hi…

实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上.朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去.熔铸到诗一样美丽的语言中去.从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p> /*css代码*/ /*单行*/ .single{ tex…

原css代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:; overflow: hidden; } 打包上线后代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-line-clamp:; overflow: hidd…

webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;…

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w…

转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头....多行省略就是大段文字后面的花式点点点. 同行这么做: Google Plus用透明到白色的渐变遮罩,渐变遮罩在文字超出的时候才显示,但无法挤出文字,且背景只能纯色,不理想. 豌豆荚则更简单粗暴换行显示,换行显…

文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开始, 热身,单行省略 这是一个全宇宙统一的方案,没有太多的魔法 /* 原理:设置文字不换行,溢出后隐藏,截断显示省略符 */ .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 如何实现多行省略呢…

作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸之地,劳心费神啊!!可怜我们UI开发GG每次苦口婆心说,微臣不是不做,是办不到啊!很是愧疚.而现在,自从用了定制多行省略,腰不酸了,手也不疼了,接起需求来,毫不费劲! 一.什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点…

首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowrap:再然后,溢出内容为隐藏,overflow:hidden:第四步:溢出文本显示省略号,即text-overflow:ellipsis:完成这四步即可实现单行文本省略号. 多行文本省略号:代码如下 display: -webkit-box;-webkit-box-orient:vertical;t…

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt…