定位的跨度被剪切在Chrome中

Question

我正在尝试将标签放在包含一组跨度的内嵌部分上方，但我发现Chrome似乎很奇怪地剪切了标签。看看这两个截图：

在Firefox中：

在Chrome中

如果您查看Chrome中的屏幕截图，您可以看到根据下一个标签的起点剪切标签。所需的结果与Firefox截图相同，其中标签一直到最后一行。

以下是用于这两个示例的代码：

.section {
  position: relative;
  border-right: solid 1px #000;
}
.section-title {
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 5px;
  right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: sans-serif;
  font-size: 0.8em;
}
.pieces {
  font-family: monospace;
}
.pieces span {
  display: inline-block;
  padding: 10px 5px 0 5px;
}

<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
    <span class="section-title">Really long title is really long</span>
<span class="pieces">
        <span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>

这是一个已知的Chrome / WebKit错误吗？是否可以在不大幅修改HTML的情况下进行修复？

Answer 1

这不是Chrome中的错误......这是代码的问题，Chrome以其认为合乎逻辑的方式解释。

首先，请注意，您的.section-title绝对定位并同时设置为left和right。这意味着：

1. 自动变为display:block。
2. 它尝试从左边开始是5px，从父母的右边界开始是5px。

然后，请注意您的父.section是内联元素，因为默认情况下所有span标记都是内联的。因此，它需要宽度来容纳它的孩子。你的长行00溢出到下一行，因此“右边界”也溢出到下一行。

作为一个顺从的元素，.section-title会尽量远离右边界5px，这个边界现在非常接近。因此，text-overflow: ellipsis正确启动。

修复您的代码：

1. 让display: inline-block用于绝对定位的元素是没用的。它让人困惑。拿出来。
2. 请勿将其设为right:5px。拿出来。 （实际上，这是唯一重要的解决方案）。
3. 请向撰写此HTML的作者反馈HTML词汇不仅仅是<span>。如果<span>，<section>这样的更多逻辑标记能更好地适应内容，那么仅使用<h1>-<h6>来表示一切都是荒谬的。