为什么我的溢出省略号在 Chrome 中被截断？答案

【问题标题】：Why are my overflow ellipses being cut off in Chrome?为什么我的溢出省略号在 Chrome 中被截断？
【发布时间】：2017-05-09 09:10:18
【问题描述】：

在某些宽度上，我的椭圆被切断了。 I've created a fiddle that demonstrates it。我尝试了不同的边距和填充组合，但似乎无法消除它。我正在使用 Chrome 51。

注意：为了简洁起见，我已经简化了我的示例。我的实际 div 是响应式的，并且文本是动态的。我需要一个适用于任何宽度的任何文本的解决方案。

有什么办法可以解决这个问题吗？

<div class="container">
  <div class="nowrap">This text should be truncated</div>
</div>

<div class="container two">
  <div class="nowrap">This text should be truncated</div>
</div>

.container{
  width:196px;
  font-size:30px;
}

.container.two{
  width:193px;
}

.nowrap{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

【问题讨论】：

显然这是一个错误。
如果这是一个错误，有人有我可以关注的链接吗？
这不是省略号的作用还是我遗漏了什么？
@JakobMillah 最后三个点被剪掉了。

标签： css google-chrome

【解决方案1】：

我在 Chromium 上创建的问题被合并为 this issue 的副本，然后又被合并为 this issue 的副本。随着状态的变化，我会更新这个答案。

更新：该问题不会出现在 Canary 中，因此 Chrome 的近期版本应该可以解决该问题。

更新 2：该问题已在 Chrome 52 中得到解决。

【讨论】：

【解决方案2】：

正如其他人已经指出的那样，这是一个 Chrome 错误，但您可以通过添加一些填充 padding-right: 4px 轻松解决它。

【讨论】：

【解决方案3】：

由于某种原因，193px 确实会发生这种情况，但在 Chrome 中，它会以它们的方式计算要在哪个字母处截断它。使用192px。

.container {
  width:196px;
  font-size:30px;
}

.container.two {
  width:192px;
}

.nowrap{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

<div class="container">
  <div class="nowrap">This text should be truncated</span>
</div>

<div class="container two">
  <div class="nowrap">This text should be truncated</span>
</div>

【讨论】：

为了简洁起见，我简化了我的问题，在现实世界中我的设计是响应式的。我需要它适用于任何宽度。我已经更新了我的问题以反映这一点。
那我不知道除了把bug报告给Chrome等待修复之外还有什么解决办法。或者做一些花哨的 JS 来确保宽度总是以 4 为增量。
文本也是动态的，因此即使是 4 的增量技巧也行不通。不管怎么说，还是要谢谢你。我向 chromium 提交了一个错误报告，我们会看看他们怎么说。