前端 css 问题 - safari 网页文本被奇怪的换行

[CSGO]

这个问题之前自己发过（ https://www.v2ex.com/t/757244 ），当时我忘记怎么解决了，现在又出现这个问题。


页面： https://wangyifang.com 在 macOS 的 Chrome 上正常，macOS 的 safari 上和 ipad 的 safari 上，就出现这个诡异的换行，而有些正常有些会被换行，给换行的文字删除或增加文字，总会被换行一个，又发现似乎和前面的图片有关系。

而在 ipad 的 chrome 上，显示错位更为严重，网页底部还有个非常高的空白，似乎是页面一个背景导致的。

我发现了问题：
在 chrome 中（ macos 、win 、android ）如果修改文字前面的图片宽度，那么这个宽度会被自动拉升，文字也不会变：


但在 safari 和 ipad chrome 上，但修改这个图片宽度，外面的框框大小不会变，然后导致右侧的文本宽度自动变小，然后就：

[kaiki]

怀疑是 letter-spacing 导致的

[CSGO]

@kaiki 不是，删了还是这样。

[wtf12138]

white-space:nowrap

[CSGO]

@wtf12138 这个可以，但是我的设计是这个文本宽度应该是自适应的，当屏幕不够宽时，文本才会被换行，比如手机上，超长的文本应该被换行，但是明显这几个换行的，宽度还有很大空间，却换行了。