内联块中的换行文本溢出父 <pre> 标记

Question

我正在尝试找到一种方法来向 <pre> 标记中的文本添加行号，同时仍允许文本换行。这带来了一些挑战：

不能将行号添加到 table 的单独列中（否则自动换行会阻止它们正确排列）。
行号不应包含在正文中（复制和粘贴文本时不应复制行号，换行应从行号列的右侧开始）。

这让我找到了当前的解决方案，即用两个  元素扩充文本，一个包含行号，一个包含该行 [0] 上的文本。为了防止第二个  中的文本在第一个  下方换行，它的样式设置为 inline-block:

span {
    display: inline-block;
    white-space: pre-wrap;
}

<pre><span>12345 </span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</pre>

问题在于，第二个  确实允许其内容换行，但位置超过了父 <pre> 的末尾。  似乎将文本包装成宽度等于 <pre> 的 a，而不管它因为第一个 .[=32 而向右移动了多远=]

这也是一个显示行为的最小示例：http://jsfiddle.net/fgdhyde6/1/

我的问题是：

为什么会这样？该行为在 Safari 9.0.1 和 Firefox 42.0 中是等效的，因此它看起来不像是 bug/quirk.
如果这不是错误，我怎样才能通过通用解决方案防止它发生（例如，不需要我硬编码第一个  的宽度） ?

更新

这种行为似乎并不像我最初认为的那样仅限于 <pre> 标签和 white-space 的特殊设置，如 pre-wrap。 <div> 中的两个  元素也会发生这种情况：http://jsfiddle.net/fgdhyde6/2/

[0]：最后行号会加上一个合适的:before { content: counter(...); }，这样可以方便的避免行号结束剪贴板。两种方法都会出现文本溢出的问题。

Answer 1

只需在 <pre> 和绝对位置 .line-numbers 上使用填充。

请注意 HTML 标记中的更改。如果你总是要有一个行号跨度后跟一个文本跨度，你可以使用 pre>span:nth-child(2n-1) 而不是 .line-number:

pre {
  border-style: solid;
  padding-left: 3rem;
  vertical-align: top;
  display: inline-block;
  white-space: pre-wrap;
}
pre>span:nth-child(4n+4) {
  background-color: #e5e5e5; /* this is just so you can see the size of it */
}
.line-number {
  position: absolute;
  left: 1rem;
}

<pre><span class="line-number">12345</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
<span class="line-number">12346</span><span>Yr fap deep v pop-up occupy, pug mixtape lo-fi disrupt butcher. Keffiyeh umami yuccie disrupt cold-pressed migas. Fap offal pinterest, +1 retro squid tilde VHS street art thundercats tacos tote bag. </span>
<span class="line-number">12347</span><span>Cray direct trade photo booth, messenger bag taxidermy chillwave retro pitchfork kickstarter. Franzen echo park meggings photo booth cronut, swag cred chicharrones meh neutra dreamcatcher knausgaard church-key.</span>
<span class="line-number">12348</span><span>Gentrify forage chillwave hammock fashion axe bushwick, fap sartorial viral typewriter seitan squid health goth knausgaard selvage. Post-ironic intelligentsia kale chips blog.</span>
<span class="line-number">12348</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</pre>

内联块中的换行文本溢出父 <pre> 标记

Wrapped text in inline-block overflows parent <pre> tag

css

pre

word-wrap

更新