所以我正在尝试制作一个盒子，如果内容太大，它只会在 X 上滚动。我已经尝试了我见过的所有堆栈溢出方式，但几天后找不到答案。
这是我的 HTML：
<div class="outputElement">
<div class="xOutput" style="border-bottom: 1px solid black;"><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
<div class="yOutput" style=""><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
</div>
CSS：
.outputElement {
background-color: #f5f1ef;
width: 226px;
margin-left: 3%;
border: 1px solid black;
height: 80px;
}
.xOutput,.yOutput{
vertical-align:top;
text-align: center;
}
.xOutput {
overflow-x: scroll;
height: 40px;
}
.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}
.algbra-h1 {
font-size: 30px;
}
现在这是当一个长数字在框中时会发生什么：
https://postimg.cc/image/5phnvjiot/
只要你想，我正在使用的项目是-->
第 72 行 HTML 和第 219-243 行 CSS
https://codepen.io/Mike-was-here123/pen/QrdJdO
它在 Y 轴上跳下一行，然后在 X 上滚动。请注意，这两个框中的内容相同。它的两个 div 相互重叠，在一个主 div 内。
这是我需要的：
它只能在X轴上滚动，不能跳下一行然后滚动。
这是我尝试过的：
使 Y 隐藏 --> 只是隐藏它，并不能阻止它，其他任何事情都等于相同的结果。
将固定像素高度设置为包含的 div 会导致问题。删除固定高度以允许所有文本可见。X 和数字之间的拆分是由空格换行引起的。当文本没有足够的水平空间时，它会在下一个空白字符处中断到下一行。包装可以被覆盖white-space:nowrap;。
.outputElement {
background-color: #f5f1ef;
width: 226px;
margin-left: 3%;
border: 1px solid black;
}
.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}
.xOutput {
overflow-x: scroll;
}
.algbra-h1 {
font-size: 30px;
white-space:nowrap;
}
我不确定你想要什么，但我确实解决了问题中描述的问题。
我试图创建一个代码片段，但由于该项目似乎使用了很多外部库，所以事情失败了。相反，我选择 fork 原始 codepen。
注意：分叉的，工作示例笔应要求删除。 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句