代码之家 › 专栏 › 技术社区 › snazzybouche

如何防止水平溢出?

css html

snazzybouche · 技术社区 · 8 年前

说我有一个 <span> 它包含一个非常长的数字序列-足够长,以至于它从页面的右侧流出。

大多数浏览器都会给我一个滚动条,这样我就可以左右滚动。

如何防止水平滚动?

我试过了 body { overflow-x: hidden; } ,它适用于桌面chrome,但用于android的chrome保留了水平滚动的能力。

我怎么能绝对保证不滚动?

(在这个场景中,我可以调整html和css,但是我不能使用js。)

2 回复 | 直到 8 年前

sideroxylon 8 年前

你介意把这串数字弄断吗?如果没有,你可以试试 word-break:break-all . 这里有没有相同的html word-break .

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

#noBreak {
  width: 300px;
  padding: 3px;
}

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

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

Akshay L 8 年前

我想申请 overflow-x :hidden 作品。

但是,除非您共享代码的一部分,否则很难满足您的需求。

我建议最好的方法是使用 container 引导程序4的类,它使div响应,您可以将此跨距保持在该跨距内,也可以将其保持在div中。

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

row类总是给出-15px的边距。容器类提供+15px的填充。

如果你能分享代码片段,你的问题会得到更清晰的回答。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前