如何实现inline元素不换行且不溢出，超出后可横向滚动？

要实现你需要的效果，核心是调整code元素的显示类型——行内元素的overflow属性不会生效，修改后的CSS如下：

html, body {
    max-width: 150px;
    overflow: auto;
}

body {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none;
}

code {
    display: inline-block; /* 改为行内块级元素，让overflow属性生效 */
    white-space: nowrap;
    max-width: 100%;
    overflow: auto;
}

HTML部分保持不变：

<p>So as you can see, the <code>code element</code> breaks as I want it to</p>

<p>but this <code>"long" code element overflows</code></p>

关键调整说明： #

• display: inline-block：让code既可以和普通文本在同一行显示，又能拥有块级元素的盒模型特性，使overflow和max-width属性生效。
• max-width: 100%：限制code元素的宽度不超过父容器的范围。
• white-space: nowrap：确保code内的文本不自动换行，超出部分通过overflow: auto显示滚动条。

内容的提问来源于stack exchange，提问作者Aditya