今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节。

文本超长打点

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

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

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

而对于多行文本的超长省略,使用 -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 实现整块的溢出打点

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

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

<section>
<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>
</section>

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

如果我们直接使用上述的方案,使用如下的 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 - 整块超长溢出打点省略

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

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

查看规范 - CSS Basic User Interface Module Level 3 - text-overflow,究其原因,在于 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 下的整块超长溢出打点省略方案

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

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

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

最后

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

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

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

小技巧!CSS 整块文本溢出省略特性探究的更多相关文章

  1. CSS 多行文本溢出省略显示

    文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专 ...

  2. css控制单行文本溢出

    1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidd ...

  3. 文本溢出省略解决笔记css

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

  4. 记录一些实用的小技巧-CSS篇

    1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...

  5. 小技巧,把Markdown文本发布到微信公众号文章

    估计很多人都是这样,平常工作在github,等到有成果要发布,又要写微信公众号. github用Markdown,微信公众号,至少截止今天,还是沿用富文本的方式.不是说富文本不好,但每次精心撰写的内容 ...

  6. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  7. css实现超出文本溢出用省略号代替

    一.单行 实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性,但需要配合使用另外两个属性使用才能达到效果. 如下: overflow:hidden; text-overf ...

  8. UGUI小技巧之Text随文本内容自动变化大小

    看了网上很多帖子,都是说在 Text 上面加上 Content Size Fitter 组件,并将对应的轴向改成 Preferred size 就可以实现 Text 大小随着文本内容自适应,如下图: ...

  9. 小技巧css解决移动端ios不兼容position:fixed属性,无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

随机推荐

  1. K8S(03)核心插件-Flannel网络插件

    系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 K8S核心网络插件Flannel 目录 系列文 ...

  2. kubernetes实战-交付dubbo服务到k8s集群(四)使用blue ocean流水线构建dubbo-demo-service

    使用jenkins创建一个新的项目:dubbo-demo,选择流水线构建 勾选保存构建历史和指定项目为参数化构建项目: 添加构建参数:以下配置项,是王导根据多年生产经验总结出来的甩锅大法: 除了bas ...

  3. Linux命令之find命令中的-mtime参数

    有关find -mtime的参数解释 mtime参数的理解应该如下: -mtime n 按照文件的更改时间来找文件,n为整数. n表示文件更改时间距离为n天, -n表示文件更改时间距离在n天以内,+n ...

  4. 1009E Intercity Travelling 【数学期望】

    题目:戳这里 题意:从0走到n,难度分别为a1~an,可以在任何地方休息,每次休息难度将重置为a1开始.求总难度的数学期望. 解题思路: 跟这题很像,利用期望的可加性,我们分析每个位置的状态,不管怎么 ...

  5. MarkDown语法详解

    MarkDown语法详解 编辑器:Typora 下载官网:https://typora.io 提速镜像:https://gitee.com/typora-mirror/Typora-Mirror/re ...

  6. Ant-design-vue—— 表单输入框输入很卡问题

    参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...

  7. bash variables plus operator All In One

    bash variables plus operator All In One Errors missing pass params #!/usr/bin/env bash # echo emoji ...

  8. how to write a node cli tool

    how to write a node cli tool https://www.google.com/search?q=how+to+node+cli+tool&oq=how+to+node ...

  9. Markdown & Static Site Generator

    Markdown & Static Site Generator https://www.gitbook.com/ https://vuepress.vuejs.org/ https://ww ...

  10. map & scale bug

    map & scale TW bug https://antv.alipay.com/zh-cn/g2/3.x/demo/map/drill-down.html import React, { ...