HTML-空白：nowrap在Google Chrome Mobile底部生成额外的空白空间-堆栈溢出

顺晟科技

2022-10-18 12:17:17

在Google Chrome Mobile上

应用white-space: nowrap时，它会在页面底部生成一些额外的空白区域，导致垂直滚动到空白区域。

例如：

<代码><；！文档类型HTML>；<；HTML Lang="；英文"；>；<；头部>；<；元字符集="；UTF-8"；/>；<；meta HTTP-equiv="；X-ua-compatible"；内容="；IE=边缘"；/>；<；元名称="；视口"；内容="；宽度=设备宽度，初始比例=1.0"；/>；<；标题>；文档<；/标题>；<；样式>；P{空白：nowrap；}<；/样式>；<；/标题>；<；身体>；<；P>；Lorem ipsum dolor sit amet consectetur，adipisicing elit.马约雷斯·马格纳姆无法律效力的法律，自由的法律结果。建筑师Quod doloremque nostrum，Vel perspiciatis ipsam停在。<；/p>；<；/正文>；<；/HTML>；

当在谷歌浏览器的移动设备上查看页面时，或者当使用谷歌浏览器的开发工具时，它会在页面底部产生一些额外的空白空间。我曾尝试将<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p { white-space: nowrap; } </style> </head> <body> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores magnam voluptatum eum laborum quo nihil distinctio hic nulla, libero aliquam consequatur. Architecto quod doloremque nostrum, vel perspiciatis ipsam quia at. </p> </body> </html>和height应用于主体，但无论使用什么值，底部的空格都会保留，例如：

<代码>正文{高度：100%；}

下面是谷歌Chrome开发工具上记录的问题的GIF：

我检查了火狐，它没有产生额外的空白空间。在谷歌Chrome桌面上，没有在底部生成额外的空白空间。

有什么想法吗？可能是什么问题？如何解决？

顺晟科技：

看起来这是Chrome仿真中的一个错误。如果您缩小窗口（而不是模拟），它不会垂直滚动。我也不会在我的Android上垂直滚动。

如果你想更精确地模拟其他设备，www.browserstack.com是一个很好的解决方案。我与该网站没有任何关系，也没有任何公司支持它。

上一篇：JavaScript-如何创建包含文下一篇：浏览器-不能被HTML识别的标签会影

网站建设

Html

HTML-空白：nowrap在Google Chrome Mobile底部生成额外的空白空间-堆栈溢出