乐趣区

关于css:小技巧CSS-整块文本溢出省略特性探究

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

文本超长打点

咱们都晓得,到明天(2021/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 小技巧,心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 ????

更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

退出移动版