纯CSS实现文字超过n行后省略功能

yeyan1996 发布于2019-08-30 13:45 / 3144人阅读

摘要：在切图阶段，经常会遇到，设计稿要求超出行后剩余文字省略，并用代替的需求。滟滟随波千万里，何处春江无月明多行文字限制字数，并将多出字符用代替春江潮水连海平，海上明月共潮生。

在切图阶段，经常会遇到，设计稿要求超出n行后剩余文字省略，并用...代替的需求。类似于下图

单行文字

单行文字时实现比较容易，使用overflow: hidden和text-overflow: ellipsis即可，其中ellipsis即省略号的意思，使用width: 10em限制横向字符数量。

多行文字

多行文字主要使用的CSS属性如下：

</>复制代码 
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  display:box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;

其中，clamp即夹子的意思，也就是说限制两行，把内容从中间夹住。box-orient属性设置盒子的摆放方向。有点类似于flexbox中的row & coloum

demo

链接https://jsbin.com/gugekes/edi...

其中，HTML为

</>复制代码 
  
  
  <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  demo1：单行文字限制字数，并将多出字符用“...”代替
  
    春江潮水连海平，
    海上明月共潮生。  
    滟滟随波千万里，  
    何处春江无月明!
  
  
  demo2：多行文字限制字数，并将多出字符用“...”代替
  
    春江潮水连海平，
    海上明月共潮生。  
    滟滟随波千万里，  
    何处春江无月明！  
    江流宛转绕芳甸，  
    月照花林皆似霰；  
    空里流霜不觉飞，  
    汀上白沙看不见。  
    江天一色无纤尘，
    皎皎空中孤月轮。 
    江畔何人初见月？  
    江月何年初照人？  
    人生代代无穷已，  
    江月年年望相似。  
    不知江月待何人，  
    但见长江送流水。  
    白云一片去悠悠，  
    青枫浦上不胜愁。 　 
    谁家今夜扁舟子？
    何处相思明月楼？
    可怜楼上月徘徊，
    应照离人妆镜台。
    玉户帘中卷不去，
    捣衣砧上指还来。
    此时相望不相闻，
    愿逐月华流照君。
    鸿雁长飞光不度， 
    鱼龙潜跃水成文。
    昨夜闲潭梦落花

CSS为

</>复制代码 
.demo1 {
  width: 10em;
  border: 1px solid red;
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.demo2 {
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  display:box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

实现的效果

[update]
Firefox有兼容性问题，不过可以通过设置max-height加overflow: hidden;来达到超出隐藏效果，只是没有省略号了。算是弥补兼容问题吧。

GPU云服务器云服务器 css省略省略号css js文字省略号 html5省略文字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115515.html

css使文字显示两行后显示省略号

摘要：本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎直接上代码狠狠的点击，查看效果吧本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎... 直接上代码： .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...

BlackMass 2019-08-29 11:01 评论0 收藏0
css使文字显示两行后显示省略号

摘要：本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎直接上代码狠狠的点击，查看效果吧本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎... 直接上代码： .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...

chuyao 2019-08-01 15:28 评论0 收藏0
实现文字的省略号

摘要：允许内容顶开指定的容器边界内容将在边界内换行。如果需要，词内换行也会发生正在努力学习中，若对你的学习有帮助，留下你的印记呗点个赞咯往期好文推荐判断和及端打包有面试题纯实现瀑布流多列及布局在项目中有涉及实现一行或者第几行后加省略号，在实现第几行后加省略号的时候，使用的是-webkit-line-clamp、-webkit-box-orient属性，会出现webpack打包-webkit...

beanlam 2019-08-23 12:21 评论0 收藏0