小技巧!CSS 整块文本溢出省略特性探究

大家好,我是若川。欢迎加我微信 ruochuan12,长期交流学习。今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节。点击下方卡片关注我,或者查看源码系列文章。

文本超长打点

我们都知道,到今天(2021/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略。

对于单行文本,使用单行省略:

{width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
image

而对于多行文本的超长省略,使用 -webkit-line-clamp 相关属性,兼容性也已经非常好了:

{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

CodePen Demo -- inline-block 实现整块的溢出打点[1]

问题一:超长文本整块省略

基于上述的超长打点省略方案之下,会有一些变化的需求。譬如,我们有如下结构:

<p><a href="/" class="avatar"></a><div class="info"><p class="person-card__name">Sb Coco</p><p class="person-card__desc"><span>FE</span><span>UI</span><span>UX Designer</span><span>前端工程师</span></p></div>
</p>

对于上述超出的情况,我们希望对于超出文本长度的整一块 -- 前端工程师,整体被省略。

如果我们直接使用上述的方案,使用如下的 CSS,结果会是这样,并非我们期待的整块省略:

.person-card__desc {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

display: inline 改为 display: inline-block 实现整块省略

这里,如果我们需要实现一整块的省略,只需要将包裹整块标签元素的 spandisplayinline 改为 inline-block 即可。

.person-card__desc span {display: inline-block;
}

这样,就可以实现,基于整块的内容的溢出省略了。完整的 Demo,你可以戳这里:

CodePen Demo - 整块超长溢出打点省略[2]

问题二:iOS 不支持整块超长溢出打点省略

然而,上述方案并非完美的。经过实测,上述方案在 iOSSafari 下,没能生效,表现为这样:

查看规范 - CSS Basic User Interface Module Level 3 - text-overflow[3],究其原因,在于 text-overflow 只能对内联元素进行打点省略。(Chrome 对此可能做了一些优化,所以上述非 iOS 和 Safari 的场景是正常的)

所以猜测是因为经过了 display: inline-block 的转化后,已经不再是严格意义上的内联元素了。

解决方案,使用多行省略替代单行省略

当然,这里经过试验后,发现还是有解的,我们在开头还提到了一种多行省略的方案,我们将多行省略的代码替换单行省略,只是行数 -webkit-line-clamp: 2 改成一行即可 -webkit-line-clamp: 1

.person-card__desc {width: 200px;white-space: normal;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.person-card__desc span {display: inline-block;
}

这样,在 iOS/Safari 下也能完美实现整块的超长打点省略:

CodePen Demo -- iOS 下的整块超长溢出打点省略方案[4]

值得注意的是,在使用 -webkit-line-clamp 的方案的时候,一定要配合 white-space: normal 允许换行,而不是不换行。这一点,非常重要。

这样,我们就实现了全兼容的整块的超长打点省略了。

当然,-webkit-line-clamp 本身也是存在一定的兼容性问题的,实际使用的时候还需要具体去取舍。

最后

好了,本文到此结束,一个简单的 CSS 小技巧,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[5] ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

参考资料

[1]

CodePen Demo -- inline-block 实现整块的溢出打点: https://codepen.io/Chokcoco/pen/JjbBpdN

[2]

CodePen Demo - 整块超长溢出打点省略: https://codepen.io/Chokcoco/pen/XWNPdpK?editors=1100

[3]

CSS Basic User Interface Module Level 3 - text-overflow: https://drafts.csswg.org/css-ui-3/#text-overflow

[4]

CodePen Demo -- iOS 下的整块超长溢出打点省略方案: https://codepen.io/Chokcoco/pen/XWNPdpK?editors=1100

[5]

Github -- iCSS: https://github.com/chokcoco/iCSS


最近组建了一个江西人的前端交流群,如果你也是江西人可以加我微信 ruochuan12 拉你进群。



················· 若川出品 ·················

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

一个愿景是帮助5年内前端人走向前列的公众号

可加我个人微信 ruochuan12,长期交流学习

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还能加我进模拟面试群)

如何拿下阿里巴巴 P6 的前端 Offer

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux配置ip地址 suse_SUSE Linux下设置IP的两种方法

第一种SUSE Linux IP设置方法ifconfig eth0 192.168.1.22 netmask 255.255.255.0 uproute add default gw 192.168.1.2释义&#xff1a;#IP配置&#xff0c;包括子网掩码,看情况修改eth0和192.168.1.22#网关修改 ,看情况修改192.168.1.2第二种SUSE Linux IP设置方法在suse操作系…

寒假作业3:抓老鼠啊

7-1 抓老鼠啊~亏了还是赚了&#xff1f; &#xff08;20 分&#xff09; 某地老鼠成灾&#xff0c;现悬赏抓老鼠&#xff0c;每抓到一只奖励10元&#xff0c;于是开始跟老鼠斗智斗勇&#xff1a;每天在墙角可选择以下三个操作&#xff1a;放置一个带有一块奶酪的捕鼠夹(T)&…

笔记本移交_创建完美的设计移交

笔记本移交重点 (Top highlight)Design specifications (specs) are guidelines that developers will use to implement a design. Think of an architect providing building blueprints to the construction team. Many designers think of specs as mindless zombie work. …

大手笔,送¥1599的Apple AirPods Pro和独家礼物等

大家好&#xff0c;我是若川。为感谢公众号读者们长久以来的支持&#xff0c;本次我联合几位前端界大佬给大家送超级福利了。除了联合福利之外&#xff0c;每位前端大佬还带了专属礼品送给大家&#xff0c;所有抽奖均可重复参与、可重复中奖&#xff0c;详情见下文每个公众号的…

jQuery1.4新特性

1. 传参给 jQuery(…) 之前&#xff0c;jQuery可以通过 attr 方法设置元素的属性&#xff0c;既可传属性的名和值&#xff0c;也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中&#xff0c;你可以把一个参数对象作为第二个参数传给 jQuery 函数本身&#xff0c;同时…

python pack unpack_golang 仿python pack/unpack

package includesimport ("bytes""encoding/binary""fmt"_"os""strconv""strings")type Protocolstruct{Format []string}//封包func (p *Protocol) Pack(args ...interface{}) []byte{la :len(args)ls :len(p.Fo…

JavaScript递归应用与实践

递归简单来说就是函数内调用自生的一种方法&#xff0c;形如&#xff1a; function foo(){foo() } 复制代码下面我列举一些常用的递归应用。 1. 求和&#xff0c;例如求1234...100之和 分析如下&#xff1a; sum(100)sum(99)100 sum(99)sum(98)99 ... sum(1)sum(0)1 复制代码代…

一个好的设计师_是什么让一个好的设计师

一个好的设计师重点 (Top highlight)The design manager role has grown considerably over the past five years. As design has been recognised as a business value-driver and organisations have increased their design maturity, we’ve seen lots more design managem…

PHP-Redis扩展安装 error: ext/standard/php_smart_str.h: No such file or directory

在源码编译PHP-redis扩展时&#xff0c;遇到缺少头文件问题【问题描述】error: ext/standard/php_smart_str.h: No such file or directory 【问题原因】PHP安装好的头文件目录&#xff1a;/php/include/php/ext/standard/&#xff0c;这些头文件&#xff0c;在php7之前的版本&…

相见恨晚的一款前端布局神器!

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天给大家推荐一款非常实用的前端页面布局神器&#xff0c;点击下方卡片关注我&#xff0c;或者查看源码系列文章。页面和布局是一门前端程序员的必修课&#xff0c;css 从来也不是停留在面试八…

IC设计前端几本经典书籍

No.1 Writing Testbenches, Functional Verification of HDL Modelsby Janick Bergeron本书主要以HDL&#xff08;verilog/vhdl&#xff09;为例&#xff0c;详细讲述了在IC DESIGN FLOW中Verification 以及Test的设计思想、方法和技巧&#xff0c;涵概了测试的各个方面&#x…

unreal无损音乐百度云_将网易云音乐专用的无损音乐格式转换成全平台通用的无损格式...

前几天发现网易云音乐的ncm格式很坑爹&#xff0c;由于网易云的部分音乐采取了这种流媒体平台模式&#xff0c;这种格式的歌曲下载到设备本地以后只有在网易云音乐的app上面才能播放&#xff0c;而且还要在会员生效期间才能播今天网易云弄出一个ncm&#xff0c;明天百度音乐来一…

锁升级

JavaSE1.6为了减少获得锁和释放锁带来的性能消耗&#xff0c;引入了“偏向锁”和“轻量级锁”。 在JavaSE1.6中&#xff0c;锁一共有4种状态&#xff0c;级别从低到高依次是&#xff1a;无锁状态、偏向锁状态、轻量级锁状态和重量级锁状态&#xff0c;这几个状态会随着竞争情况…

ux和ui_首先要做的— UX / UI案例研究

ux和ui休息一下&#xff01; (Get some rest!) After four weeks of four-day design sprints each week, I welcomed the opportunity to work on this 9-day design challenge. With this also being an individual project, I allocated 50% of my time on the UX process a…

微信消息模板换行符转义问题处理

通常的微信模板&#xff1a; Hello &#xff01;\n\n Are you OK&#xff1f; ① 直接定义字符串&#xff1b; ② 数据库中读取&#xff1b;这里需要说明的是 数据库读取 的内容&#xff0c;如果直接推送&#xff0c;\n\n是没有被转移为换行符的。此时需要&#xff1a; $tplStr…

Vue2 彻底从 Flow 重构为 TypeScript,焕然一新!

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;长期交流学习。今天分享一篇技术热点&#xff0c;众所周知&#xff0c;前不久vue3不打算支持IE11&#xff0c;vue2将支持composition API&#xff0c;现在vue2用ts重构&#xff0c;试问&#xff1a;还学得动嘛…

红米note5linux刷机包__最新最全的红米Note5ROM刷机包下载、刷机教程_红米Note5论坛_移动叔叔...

本帖最后由 压力山大大叔 于 2018-5-15 00:52 编辑20180513跟新全屏手势。看最后一张载图。1&#xff1a;先解锁&#xff0c;刷第三方&#xff0c;都是这个流程。2非常干净&#xff0c;只有670兆&#xff0c;刷完没有找到浏览器&#xff0c;刷前下载一个浏览器在手机里备用。3电…

每个网页设计者都自以为是

&#xff08;一&#xff09;垃圾还是经典网页技术更新很快&#xff0c;一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品&#xff0c;都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。网页设计 者不管自己的学识、技术和经验如何&#xff0c;都自以为自己…

文件夹的拷贝

文件夹用来把文件包裹起来&#xff0c;褪去这些外衣&#xff0c;说到底拷贝文件夹也就是拷贝文件 模拟实例&#xff1a;将F:/Picture/test 文件夹 拷贝到 F:/Picture/dir文件夹 该实例中test文件夹下只包含了test.txt文件 步骤分析&#xff1a; 1.通过路径得到File对象 2.递归查…

【抽奖】若川诚邀你加前端群,长期交流学习~

最近有许多读者朋友关注了我&#xff0c;加我好友没有来得及拉群交流。另外偷偷告诉你&#xff1a;公众号回复 411&#xff0c;参与抽奖&#xff0c;送极客时间100元以内的课程&#xff0c;今晚八点开奖&#xff0c;必须开奖前加了我的微信&&像是前端&&关注了我…