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

Question

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

• 行号不能添加到表格的单独列中(否则换行会阻止它们正确排列)。
• 行号不应包含在正文中(复制和粘贴文本时不应复制行号，换行应从行号列的右侧开始)。

这使我找到了当前的解决方案，即用两个 <span> 来扩充文本元素，一个包含行号，一个包含该行 [0] 上的文本。防止文本在第二个<span>从第一个 <span> 下面换行, 它的样式为 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>

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

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

我的问题是:

• 为什么会这样？该行为在 Safari 9.0.1 和 Firefox 42.0 中是等效的，因此它看起来不像是实现错误/怪癖。

• 如果这不是错误，我如何通过通用解决方案(例如，不需要我对第一个 <span> 的宽度进行硬编码)来防止它发生？

更新

这种行为似乎并不局限于<pre> white-space 的标签和特殊设置喜欢pre-wrap ，正如我最初的想法。它也发生在两个 <span> 上。 <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>