Html 定位跨距夹在铬合金中

我试图在包含一组跨距的内联部分上方放置一个标签，但我发现Chrome似乎在奇怪地剪裁标签。请看以下两个屏幕截图：

在Firefox中：

铬合金：

如果您查看Chrome的屏幕截图，您可以看到标签正在根据下一个标签的起点进行剪裁。预期的结果将与Firefox屏幕截图相同，其中标签一直延伸到行的末尾

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

部分{
位置：相对位置；
右边框：实心1px#000；
}
.章节标题{
显示：内联块；
位置：绝对位置；
顶部：-10px；
左：5px；
右：5px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
字体系列：无衬线；
字号：0.8em；
}
.件{
字体系列：monospace；
}
.件跨度{
显示：内联块；
填充：10px 5px 0 5px；
}

很长的标题很长
00000000000000000000000000000000000000000000000000
很长的标题很长
00000000000000000000000000000000000000000000000000
很长的标题很长
00000000000000000000000000000000000000000000000000
很长的标题很长
00000000000000000000000000000000000000000000000000

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

首先，请注意，您的

.section title

绝对位于

左侧

和

右侧

。这意味着：

它会自动变成

display:block

它尝试从父对象的左边界开始为5px，从父对象的右边界开始为5px

然后，请注意您的父

.section

是一个内联元素，因为默认情况下所有

span

标记都是内联的。因此，它需要容纳其子对象所需的宽度。您的

00

长行溢出到下一行，因此“右边界”也溢出到下一行

作为一个顺从的元素，

.section title

尽最大努力使右边界保持5px的距离，而右边界现在更近了。因此，

文本溢出：省略号

正确地起作用

要修复代码，请执行以下操作：

对于绝对定位的元素使用

display:inline block

是无用的。这让人困惑。把它拿出来

不要将其设置为

右侧：5px

。把它拿出来。（实际上，这是唯一重要的修复方法）

请向编写此HTML的作者反馈，HTML词汇表不仅仅是

。当像

，

-

这样的逻辑标记更适合内容时，只对所有内容使用

是荒谬的

---

在我的浏览器（Chrome）@MegaMind中运行良好您是否尝试过调整窗口大小以使它们重叠？我在Chrome和nw.js（最新版本）中都遇到过这个问题。是的，我调整了Chrome的大小。文本被删掉了。但Firefox也是如此。@MegaMind是吗？那不是我的事。。我不是说当文本到达行尾时发生的剪辑。。那很好。我的意思是在下一节开始时出现的剪辑。@MegaMind如果你看CSS，

节标题

确实有这个规则，但它实际上被绝对定位覆盖。

right:5px

规则的存在是有原因的：如果两个部分相邻，它可以防止文本溢出到下一部分（为了证明这一点，您可以尝试删除部分00跨距，使该部分短于标题文本），并防止溢出父对象的边缘。

display:inline块

可能只是过去测试的遗留样式。实际上，

right:5px

本身并不能防止溢出，只是因为元素总是将自身定位为距右边框5px。通过将

宽度
设置为100%或更小，可以实现相同的效果，从而确保其不会溢出父级。当然，这不能解决你的问题。你必须选择：要么让
.section title
的宽度溢出其父项，要么不溢出。这就是我的意思。。我想知道的是（以及这个问题的全部要点是什么）是否/如何可能不让它溢出父级，而不是以这种方式剪裁。