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

2020 年 8 月 7 日
 yiXu

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

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

2122 次点击
所在节点    程序员
10 条回复
B3C933r4qRb1HyrL
2020 年 8 月 7 日
我这里两个页面都没有 x 轴滚动条
yiXu
2020 年 8 月 7 日
wudicgi
2020 年 8 月 7 日
初步看是第一个页面中,文章接近末尾处的这一行代码太长了:
} 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 年 8 月 7 日
@cuvii 我的电脑宽度 应该是 1496px
yiXu
2020 年 8 月 7 日
@wudicgi 这里为啥我使用 word-break: break-all;
也无法使他换行?
cheeto
2020 年 8 月 7 日
@yiXu 用 white-space: pre-wrap;
yiXu
2020 年 8 月 7 日
@wudicgi 或者,我为 pre 标签,设置为 overflow: auto; 为什么它不会将这块出现滚动条?
而是将整个区域撑大,造成全局需要一个滚动条?
有什么方法修复这个问题嘛?不想要全局的滚动条,而只是内部代码块有滚动条就好,能折行也行。
journey0ad
2020 年 8 月 7 日
因为 pre 标签浏览器默认 white-space: pre 改成 white-space: pre-wrap 就行了,原理 mdn 看文档
yiXu
2020 年 8 月 7 日
@cheeto 感谢,你的这种方式可以!
yiXu
2020 年 8 月 7 日
@journey0ad 好的,谢谢,我去看看

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/696479

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX