定位跨度在 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. 它尝试从左边界 5 像素，从父边界右边界 5 像素。

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

作为一个听话的元素，.section-title 尽最大努力与右边的边界保持 5px 的距离，现在已经非常接近了。因此，text-overflow: ellipsis 正确启动。

修复您的代码：

1. 将display: inline-block 用于绝对定位的元素是没有用的。它令人困惑。拿出来。
2. 不要将其设置为right:5px。把它拿出来。 （实际上，这是唯一重要的解决方法）。
3. 请向编写此 HTML 的作者反馈 HTML 词汇表不仅仅是 <span>。当<section>、<h1>-<h6> 等逻辑标签更适合内容时，只对所有内容使用<span> 是荒谬的。