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

文本超长打点

我们都知道,到今天(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. VScode 相关

    1.F5运行py文件,打开terminal终端的时候总是弹出Powershell窗口,只能在powershell窗口中用命令行运行程序,实在很不方便. 解法:右键Powershell属性,取消使用旧版 ...

  2. 主动降噪,通话降噪及AI降噪之辨

    近日,三星发布的Buds Pro 耳机中,宣传有以下功能.其中涉及到噪声的,有主动降噪,通话降噪及智能降噪,很多人对他们的具体用途容易混淆,今天我们来辨析一下. 主动降噪和通话降噪完全不是一个概念,无 ...

  3. C- c常见问题分析

    一.遇到undefined symbol怎么办: (1)首先解析未定义符号是什么:[利用c++filt命令] c++filt _ZN4Json5ValueixERKNSt7__cxx1112basic ...

  4. Java | 在 Java 中执行动态表达式语句: 前中后缀、Ognl、SpEL、Groovy、Jexl3

    在一些规则集或者工作流项目中,经常会遇到动态解析表达式并执行得出结果的功能. 规则引擎是一种嵌入在应用程序中的组件,它可以将业务规则从业务代码中剥离出来,使用预先定义好的语义规范来实现这些剥离出来的业 ...

  5. Headless Chrome Node API

    puppeteer Headless Chrome Node API https://github.com/GoogleChrome/puppeteer https://pptr.dev/ PWA h ...

  6. 如何用 js 实现一个类似微信红包的随机算法

    如何用 js 实现一个类似微信红包的随机算法 js, 微信红包, 随机算法 "use strict"; /** * * @author xgqfrms * @license MIT ...

  7. SVG image tag

    SVG image tag https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag <?xml versi ...

  8. how to write an ebook that can support published by format PDF, Epub, Mobi and so on

    how to write an ebook that can support published by format PDF, Epub, Mobi and so on 如何写一本自己的电子书,支持各 ...

  9. VP9 & AV1 & H.265

    VP9 & AV1 & H.265 视频编码格式 AV1 https://caniuse.com/#search=AV1 VP9 https://caniuse.com/#search ...

  10. taro coding specification

    taro coding specification https://nervjs.github.io/taro/docs/spec-for-taro.html 跨平台开发 https://nervjs ...