Question

所以我正在尝试制作一个盒子，如果内容很大，它只会在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--隐藏它，不能阻止它，其他任何事情都等于相同的结果。

Answer 1

为包含的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;
    }

我不确定您想要的是什么，但是我确实解决了问题中所述的问题。

我试图创建一个代码段，但是由于该项目似乎使用了很多外部库，所以事情发生了。相反，我选择了分叉原始的Codepen。

注意：叉形工作示例笔应要求删除。

仅在X轴上滚动

1 个答案: