小技巧！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 实现整块省略

这里，若是咱们须要实现一整块的省略，只须要将包裹整块标签元素的 span 的 display 由 inline 改成 inline-block 便可。

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

这样，就能够实现，基于整块的内容的溢出省略了。完整的 Demo，你能够戳这里：

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

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

然而，上述方案并不是完美的。通过实测，上述方案在 iOS 和 Safari 下，没能生效，表现为这样：

查看规范 - 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 订阅收藏。

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