天龙八部搭建mysql_天龙八部架设mysql数据教程

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

文本超长打点
我们都知道，到今天（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;
}
image

CodePen Demo – inline-block 实现整块的溢出打点

问题一：超长文本整块省略
基于上述的超长打点省略方案之下，会有一些变化的需求。譬如，我们有如下结构：

Sb Coco