记录下一次img标签奇怪的展示行为

复盘

有一次做了一个富文本编辑的功能，可以编辑文字大小，字体，是否加粗等样式，除此之外还可以任意插入图片或者视频文件。

一般来说富文本最后生成的就是一些html字符串，用户控制的样式就以行内样式的形式作用在了html标签上面，这样以来就能做到编辑时候和最终预览样式基本一致的效果。

在展示态使用富文本特别简单，只要将富文本内容原样输出即可，当然为了安全考虑，一般来说还要过滤掉script标签等会引起xss攻击的情况，这里我们就不详细说明了。

接着问题来了：

有用户和我说我富文本编辑器上传的图片有好几张，但是在展示态就只能显示一张，第一反应就是怎么会呢？按照上面的说法展示态应该就是富文本的编辑态啊，那么问题出在哪里了呢？会不会是因为我对富文本内容展示的外部容器设置了overflow属性和固定高度，导致图片只显示了一部分呢？

于是开启F12调试了起来，先是定位到富文本的嵌套的外部容器，看看看有没有设置固定高度，结果是没有，有没有设置overflow属性，也是没有？

这就奇怪了，于是便定位到富文本区域的图片标签，也是有宽度和高度的，但是除了第一张，后面的几张的确没有在屏幕上显示。

这是什么原因呢，在脑海里马上翻动着和img标签相关的知识点，首先，img标签默认是inline行内元素，按照展示顺序会从左到右，从上至下，但是现在这个场景有点不一样，为什么呢？因为这个富文本下的图片尺寸都很大，属于那种直接占满屏幕的那种，所以按照上面的说法第二张图片肯定是要接在第一张图片下面的，可是现在的结果就不一样，为什么没有呢？

我又开始借助元素定位工具将定位元素放到了第二张图片，没有在屏幕区域显示，这时候突然有种念头冒了出来，会不会真的显示在第一张图片的右边了？如果是这样的话，我只需要给图片元素设置为block类型就可以验证了吧，果然，加上block块属性之后，所有图片就都显示出来了。

那如果是这样的话，这个解释就和我们最初提到的图片img标签作为行内属性有矛盾了啊，常规的行内样式显示在右边的前提是父容器有足够的宽度才行，超出宽度必然会换行，不然的话我们的文章内容根本无法阅读了。

这个猜测在富文本编辑期能够正常换行又得到了进一步的验证，那么问题在哪里呢？

按照控制变量法，我想到了应该是预览态加了什么特殊的样式导致了这个问题，想到什么样式能够使内容不换行，white-space这个属性马上映入我脑海中，这个属性一般是配合不让内容换行来使用，而img作为一个行内样式，自然就受到了这个样式的影响，马上去翻看父容器上设置的全部样式，果然找到了这个属性。

至此，整个事情的来龙去脉已经一清二楚，我们最后来总结下：

1. 图片默认是inline行内样式，显示方式受父容器宽度影响，从左到右，从上到下
2. 给图片加block块样式，可以强制每张图片换行展示
3. white-space属性可以使图片不受父容器宽度的影响，始终一行展示