-Webkit-Box在Safari中的兼容性问题（bug？）

时间：2023-03-12 04:12:16 科技观察

本文转载自微信公众号“知乎子乐”，作者linxz。转载本文请联系知乎子乐公众号。问题来源背景这是当时在“iCSS前端CSS交流讨论”群里看到的。当时转成朋友的问题是这样的：看这张图，主要有两点：多行截断和标签换行。多行截断，使用-webkit-box的方法。对于tagwrapping，早期就是对图片和文字进行wrapping的方式。只需使用浮动。理想是丰满的，现实是骨感的。没有别人的痛苦，一切都是那么的轻松。当我提到可以用float实现的时候，群里有小伙伴反馈说在Safari和移动端会有问题。其实我也不是很在意，后来试了一下，果然如此。摸索着往前走，真是个奇怪的现象。首先，我从来没有见过这样的情况，之前也没有遇到过这样类似的需求。第一次，没有查阅任何资料，直接做了一个最简单的demo看看效果。new很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字a大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本

非常简单的HTML结构和非常简单的CSS样式。.text-overflow{width:200px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.425;background-color:pink;}.tag{float:right;padding:02px;color:#fff;background-color:#f32600;border-radius:2px;}最后的效果就是前面看到的，在Chrome中的预期完美得到结果，但是在safari中发现tag不见了，有一片空白。按照常规思路，一般这种内容突然消失，不是截断就是被覆盖，或者渲染有问题。尝试添加position:relative;到.tag看效果，发现tag出现了，而且是独占线。假设tag占一行，说明至少有类似块级元素的特性，float之后，元素本身会转为块级。想到这里，突然想到-webkit-box是flex布局的早期版本，会不会和display:flex一样；这个，当有flex容器的时候，flex元素就不再是BFC，IFC之类的了，而是FFC？如果是这样，是否可以再嵌套一层，最外层控制文本的多行截断，最内层控制标签的浮动效果？所以改变HTML结构。

new很多文字很多文字很多文字很多文字很多文字很多文字很多大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量文本大量的文字

在原来的基础上，增加了一层，更改了CSS部分。实际上，只需将选择器.text-overflow替换为.box即可。.box{width:200px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}.tag{float:right;padding:02px;color:#fff;background-color:#f32600;border-radius:2px;}那么最后的效果就是这样的。也就是说，确实是-webkit-box的影响，应该是FFC的关系。至于浏览器的差异，可能是兼容性问题。查资料由于-webkit-box是早期flex布局的一个版本，肯定还有一些其他的属性，比如：box-pack；框对齐；盒子方向；那么按照这个思路，我们可以看到flex相关的Documentation。在之前的flex教程文档（https://www.yuque.com/linxz/flex）中有关于display:flex的介绍；前面也提到了FFC，所以我们从w3c的文档中也可以看出：一个flex容器为其内容建立一个新的flex格式化上下文。这与建立块格式化上下文相同，只是使用了flex布局而不是块布局。例如，浮动不会侵入弹性容器，弹性容器的边距不会与其内容的边距一起折叠。Flex容器为它们的内容形成一个包含块，就像块容器一样。[CSS21]overflow属性适用于弹性容器。以上内容来自：https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context其中，Aflexcontainer为其内容建立了一个新的flexformattingcontext。而且浮动不会侵入flex容器，至少说明在flex布局中，浮动是“可能”无效的。我的结论是关于如何处理这个问题。我的结论，是的，只是代表我个人的结论：多一层，多行被外层控制元素截断，最内层实现浮动环绕的效果，避免子元素浮动无效的情况，因为弹性容器。