[求解答] css 格式相同， x 方向上却出现滚动条

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1558 天前的主题，其中的信息可能已经有所发展或是发生改变。

在看廖雪峰的 javascript 教程的过程中，发现， https://www.liaoxuefeng.com/wiki/1022910821149312/1023022310122752 这个网页 x 方向会有滚动条出现。其他网页并没有，如： https://www.liaoxuefeng.com/wiki/1022910821149312/1023023660400160 没有。

我很奇怪它是因为什么造成，能否修复？我查看了它的结构，display 是 flex 方式，中间大部分的 width 设置为 100%。不知道为啥会有溢出现象。

10 条回复

B3C933r4qRb1HyrL

2020-08-07 15:34:41 +08:00

我这里两个页面都没有 x 轴滚动条

yiXu

2020-08-07 15:40:03 +08:00

![示例]( https://s1.ax1x.com/2020/08/07/afJGex.md.png)

wudicgi

2020-08-07 15:40:07 +08:00

初步看是第一个页面中，文章接近末尾处的这一行代码太长了：
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {

把它所在的 <pre> 标签整个删掉后，怎么调整窗口大小都不会出横向滚动条

yiXu

2020-08-07 15:42:02 +08:00

@cuvii 我的电脑宽度应该是 1496px

yiXu

2020-08-07 15:45:25 +08:00

@wudicgi 这里为啥我使用 word-break: break-all;
也无法使他换行？

cheeto

2020-08-07 16:00:22 +08:00

@yiXu 用 white-space: pre-wrap;

yiXu

2020-08-07 16:01:21 +08:00

@wudicgi 或者，我为 pre 标签，设置为 overflow: auto; 为什么它不会将这块出现滚动条？
而是将整个区域撑大，造成全局需要一个滚动条？
有什么方法修复这个问题嘛？不想要全局的滚动条，而只是内部代码块有滚动条就好，能折行也行。

journey0ad

2020-08-07 16:02:10 +08:00

因为 pre 标签浏览器默认 white-space: pre 改成 white-space: pre-wrap 就行了，原理 mdn 看文档

yiXu

2020-08-07 16:03:31 +08:00

@cheeto 感谢，你的这种方式可以！

yiXu

2020-08-07 16:04:15 +08:00

@journey0ad 好的，谢谢，我去看看