Question

假设我有一个<span>，其中包含很长的数字序列 - 足够长，以至于它从页面的右侧流过。

大多数浏览器会给我一个滚动条，然后我可以向左和向右滚动。

如何阻止水平滚动？

我尝试了body { overflow-x: hidden; }，适用于桌面版Chrome，但Chrome for Android保留了横向滚动的功能。

我怎样才能绝对保证不滚动？

（我可以在这种情况下调整HTML和CSS，但我不能使用JS。）

Answer 1

你介意打破一串数字吗？如果没有，您可以尝试word-break:break-all。这是包含和不包含word-break的相同HTML。

＆＃13;

#break {
  width: 300px;
  word-break: break-all;
  padding: 3px;
}

#noBreak {
  width: 300px;
  padding: 3px;
}

＆＃13;

<div id="break">
  <span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>

<div id="noBreak">
  <span>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</span>
</div>

＆＃13;

Answer 2

我认为应用overflow-x :hidden有效。

但除非您分享代码的一部分，否则难以回答您的要求。

我建议的更好的方法是使用container类引导程序4，这使得div响应，你可以将这个范围保持在其中，或者将它保留在div中。

<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

行类总是会给出-15px的边距。和容器类给出了+ 15px的填充。

如果您可以共享代码段，您的问题可以得到更明确的回复。

如何防止水平溢出？

2 个答案: