Chrome 更新影响 CSS text-overflow 相对于 text-indent

Question

在 Chrome 中，具有 text-overflow 的项目的缩进 (text-indent) 版本不再像以前那样表现。

在 Chrome 版本 77.0.3865.75 之前，缩进文本仍会显示省略号。 I can see that in the changes they've modified the way text-overflow works in the Chromium project.

在 Firefox、Safari 和 Edge 中，缩进仍然像以前一样工作（请参阅下面的 Codepens 进行测试）

我的问题：

关于解决此问题的好方法有什么想法吗？
就我个人而言，这是 Chromium 的错误还是其他浏览器不符合规范？

示例：

鉴于此 HTML:

<div>
  <h1>A long title over a character limit</h1>
  <h1 class="indent">A long title over a character limit</h1>
</div>

和CSS：

div {
  width: 25em;
  background: #ccc;
  padding: 1em;
}

h1 {
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

h1.indent {
  text-indent: 2em;
}

我们看到在 Chromium-based 浏览器中，h1.indent 版本的标题没有省略号。

再次在 Firefox 和其他浏览器中，text-overflow 按预期工作。在较新的 Chromium-based 浏览器中，它不会。截屏：

这是代码笔中 HTML/CSS 的副本： https://codepen.io/camsjams/pen/yLBGBvP

这是一个代码笔，在 HTML table 中显示了这一点： https://codepen.io/camsjams/pen/dybwbWr

Answer 1

这是由 Chrome 中的更改引起的，并且已在 Chromium 开发频道中修复。

这是我在 Chromium 问题网站上发现的错误：https://bugs.chromium.org/p/chromium/issues/detail?id=1006395#c5

一旦发布完成，我将更新正确的版本号。

更新： 在 Chrome 版本 Version 81.0.4044.92 或更高版本中，此错误已修复！

Answer 2

Chrome 版本 79.0.3945.130（官方构建）（64 位）现在以另一种意想不到的方式运行。

问题：根据文本缩进值，使用文本缩进、overflow:hidden（需要使用文本溢出：省略号）和文本溢出：省略号一起将省略号推出可见 space .

下面是一些基本的 CSS 和 HTML 显示行为和下面的屏幕截图。

<style>
 #test1{
  text-indent:1px;
 }
 #test2{
  text-indent:10px;
 }
 .ellipsis{
  border:1px solid #000;
  width:200px;
  margin:50px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
 }
</style>

<div id="test1" class="ellipsis">
 Here is some really long text for testing purposes
</div>
<div id="test2" class="ellipsis">
 Here is some really long text for testing purposes
</div>

上述版本 Chrome 的结果：

Chrome 更新影响 CSS text-overflow 相对于 text-indent

Chrome update affects CSS text-overflow in relation to text-indent

html

css

google-chrome

chromium