css 效果-uni-app 使用 float 属性实现环绕之后文字最多显示两行

效果

思路

这个效果是文本环绕标签组件最多显示两行，京东app也有这个效果

环绕效果我们使用float:left实现环绕，文字最多显示两行，我一开始想到的是用下面的代码实现：

display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式
-webkit-line-clamp: 2; // 显示的行数

ps: 关于display:-webkit-box我们下面文章再介绍

但是出来的效果是下面这样的：

于是查了float的资料

浮动出现的意义只是用来让文字环绕图片而已，仅此而已。float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

根据定义

最终文本显示两行还是改为下面的方式实现
设置文本行高，然后设置文本的最大高度即可，伪代码如下：

line-height: 50rpx;
max-height: 100rpx;

探索下 display:-webkit-box 是什么

现在并非所有浏览器都支持CSS3新的属性，其中以firefox、chrome、opera最为典型，它们尽可能想要去兼容最新的标准或规定，但却发现要实现这些支持还是有一定的难度。但实际上，mozilla和webkit正在对此进行实验和开发，试图有一天可以支持它。对于CSS开发者来说，他们发现了这个，并在前面添加-moz-或-webkit-来声明：即使你们在实验阶段，我们仍然坚持使用你们当前开发的成果，无论显示出来的效果是好是坏。----内容来源网络

从上面介绍我们知道，-webkit-是浏览器为了兼容新API而做的一种调整。

大多数浏览器的前缀包括：

-moz- : Firefox
-webkit- : Safari & Chrome
-o- : Opera
-khtml- : Konqueror
-ms- : Internet Explorer
-chrome- : Google Chrome专用前缀

前面我们也知道display:-webkit-box是让该对象以伸缩性的盒子模型去展示内容。
那么我们还知道display:flex是专门来实现伸缩性，他们的区别是什么呢？

下图是来自知乎网友的解答：

可以看出，flex语法是目前可伸缩性布局的主流实现方式，为了向下兼容，我们还是会使用--webkit-box的API。

实现

有其他实现方式的朋友，欢迎解惑。
这里涉及的代码不便公开，具体实现代码可自行复现或联系我