如何防止“内联”元素在不换行时溢出？

Question

我有以下代码：

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 {
    white-space: nowrap;
    overflow: auto; /* Doesn't Do Anything */
}

<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>

我希望

p

标签内的文本换行，而我不希望

code

内的文本换行，但我也不希望

code

元素溢出，而是

max-width

元素溢出

100%

之后我希望它可以滚动。

Answer 1

评论正确地告诉了你：为了正确地溢出

<code>

标签，你需要给它一个块内部结构。另外，不要忘记垂直对齐。

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

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

code {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: auto;
  vertical-align: bottom;
  color: red;
}

/* Only for example --> */ p { background-color: #fc08; overflow: auto; resize: both; }

<p>So as you can see, the <code>code element</code> breaks as I want it to but this <code>"long" code element overflows</code> Now it works!</p>

运行代码片段并通过抓住右下角来调整段落大小。