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

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

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

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

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

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

Answer 2

试试这个。

div {white-space: nowrap}

为什么在 div 元素中不溢出自动不起作用？

2 个答案: