定位伪元素时文本溢出中断答案

【问题标题】：Text-overflow breaks when pseudo-element is positioned定位伪元素时文本溢出中断
【发布时间】：2018-04-04 12:14:25
【问题描述】：

我创建了一个带有 ::before 伪元素的锚点，用于 SVG 图标。当::before 是两者 position: relative 并且在使用top/left 时定位为负值或在使用bottom/right 时定位为正值时，text-overflow: ellipsis 功能会中断。

a {
  display: block;
  border: 1px solid blue;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 200px;
}

a::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid red;
  position: relative;
}

a.test2::before, a.test3::before {
  left: -1px;
}

a.test3::before {
  position: absolute;
}

<a class="test1">some very long text which overflows</a>
<a class="test2">some very long text which overflows</a>
<a class="test3">some very long text which overflows</a>

例如，在每个示例中，文本应该溢出并得到一个省略号，但第二个示例中断（至少在 Chrome 61、macOS 中）。

Mac 上的 Firefox 56 似乎没有有这个问题。

使用position: absolute 或其他一些变体可以解决问题，但我找不到太多关于为什么会发生这种情况的解释。

【问题讨论】：

标签： html css

【解决方案1】：

Pseudo-elements 有一个默认的position static，很像常规元素。对静态定位应用任何形式的偏移（例如使用left）都没有效果。但是，您将 relative 中的position 显式应用于这三个伪元素。相对定位的元素“保留在文档的正常流程中”，并且相对于其父级的偏移量；它们的偏移量计算在考虑到父偏移量后应用。

非常重要，<body> 有一个默认 margin 8px。除非您显式更改此边距，否则具有relative 定位的直接子元素将具有默认的left 或8px。因此，您的第一个元素偏移了8px，而您的第二个元素偏移了7px（8px 减去手动指定的left: 1px）。

一旦您应用了 absolute 的位置，该位置“相对于其最近的定位祖先（即不是static 的最近祖先）。如果定位的祖先没有” t 存在，使用初始容器”。在你的情况下，那是<body>。

绝对定位忽略父母填充。关于为什么会发生这种情况here有一个很好的答案，但简而言之，position: absolute 使包含框成为父级的 padding 框而不是内容框。因此，第三个伪元素的（理论上）默认 left 偏移量为 0px。但是，默认情况下不应用； left 必须手动指定才能生效。手动指定left: -1px 应用偏移量，并为其提供<body> 左侧的1px 偏移量。

希望这有助于解释为什么会发生这种情况！ :)

【讨论】：

您的解释似乎与文本溢出的计算无关。包含元素是无关紧要的，因为无论body 的边距/填充如何，它都可以复制，实际上我们遇到的实际问题远比body > a 更深。我个人已经了解定位的工作原理，但这个答案并没有解决为什么文本溢出不再适用，尽管文本 仍然明显溢出。
该框位于左侧，因为position: absolute 考虑了父级的偏移量。如果您有更深层次的分层问题，那是因为您没有在父元素上指定position，或者您添加了padding 或margin。至于没有溢出的文本，这似乎是一个既占用空间又在您试图截断的元素上有偏移的怪癖。从伪元素中删除 position: absolute 或将 position: relative 添加到容器中以解决该问题。
也许我的帖子不是很清楚，但我不是在问定位，我完全了解定位的工作原理。在回答我唯一的问题时，您说这“似乎是个怪癖”，这没有帮助。
很公平，但我认为溢出问题并不是立即“明显”，因为我最初认为您的问题是有文本时框没有对齐-溢出。如果您对我对使用带有绝对定位伪元素的text-overflow 的怪癖的“不相关”解释不满意，请使用 relative 伪-元素（正如我在“没有帮助”的答案中陈述）。为什么你不想要相对的伪元素超出了我的理解......
我从来没有说过我不想这样做，事实上我最初发布了我知道解决方法，但我的问题表明我正在寻找“为什么会发生这种情况的解释”。当我无法确定问题的原因时，我不喜欢解决问题。