为什么 overflow auto 在 div 元素中不起作用？

Question

我目前正在开发 html 站点，我在其中嵌入了从 Arduino 导出的 html 代码。
我试图将 overflow: auto; 添加到样式表文件，它不起作用 – 它无法在窄屏幕上滚动到一侧，而是换行...

这是我的代码：

body {
    margin: 5% 20%;
}

.code {
    padding: 0.5em;
    background-color: #282c34;
    counter-reset: line;
    font-family: 'Hack', monospace;
    overflow: auto;
}

.code div::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    padding: 0em 0.5em 0em 0em;
    width: 2em;
    color: #555555;
    text-align: right;
}

<body>
    <div class="code">
        <div><span style="color: #98c379;">#include</span> <span style="color: #aaaaaa;">&lt;</span><span
                style="color: #e06c75; font-weight: bold;">EEPROM</span><span style="color: #aaaaaa;">.</span><span style="color: #ffffff;">h</span><span
                style="color: #aaaaaa;">&gt;</span></div>
        <div><span style="color: #98c379;">#include</span> <span style="color: #aaaaaa;">&lt;</span><span
                style="color: #e06c75; font-weight: bold;">Servo</span><span style="color: #aaaaaa;">.</span><span style="color: #ffffff;">h</span><span
                style="color: #aaaaaa;">&gt;</span></div>
        <div><span style="color: #e06c75; font-weight: bold;">Servo</span> <span style="color: #ffffff;">s1</span><span style="color: #ffffff;">;</span></div>
        <div><span style="color: #e06c75; font-weight: bold;">Servo</span> <span style="color: #ffffff;">s2</span><span style="color: #ffffff;">;</span></div>
        <div></div>
        <div><span style="color: #98c379;">#define</span> <span style="color: #ffffff;">sensor</span> <span style="color: #ffffff;">A0</span></div>
        <div><span style="color: #98c379;">#define</span> <span style="color: #ffffff;">IR</span> <span style="color: #e5c07b;">3</span></div>
        <div></div>
        <div><span style="color: #61afef;">int</span> <span style="color: #ffffff;">x</span> <span style="color: #aaaaaa;">=</span> <span
                style="color: #e5c07b;">100</span><span style="color: #ffffff;">;</span> <span style="color: #aaaaaa;">&#47;&#47;count of
                measurements</span></div>
        <div><span style="color: #61afef;">String</span> <span style="color: #ffffff;">color</span><span style="color: #ffffff;">;</span>
        </div>
    </div>
</body>

Answer 1

试试这个。

div {白-space: nowrap}

Answer 2

溢出实际上只对以下元素有意义：

有display'block'或'inline-block'
设置明确的宽度（或高度，取决于溢出的性质）

此外，如果溢出是您不想换行的文本，您还需要提供 white-space: nowrap.

您的元素缺少所有这些因素。所以：

.code {
    display: block; /* or inline-block; }
    width: 200px; /* or 100%, or whatever */
    white-space: nowrap;
    /* other styles */
}

为什么 overflow auto 在 div 元素中不起作用？

Why doesn't overflow auto not working in div element?

html

css

arduino-ide