为什么我的溢出椭圆会在Chrome中被切断？

Question

在某些宽度下，我的椭圆被切断了。 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;
}

Answer 1

我在Chromium上创建的问题已合并为this issue的副本，然后将其合并为this issue的副本。我会在状态发生变化时更新此答案。

更新： 该问题未显示在Canary中，因此近期发布的Chrome应该可以解决此问题。

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

Answer 2

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

Answer 3

出于某些原因，确实sed -i '/href="../../../../file/old.html"/c\' *.html sed: -e expression #1, char 11: unknown command: `.' 确实发生了这种情况，因此它必须是一个但在Chrome中，它会计算哪个字母可以将其剪切掉。使用193px。

＆＃13;

＆＃13;

192px

＆＃13;

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

.container.two {
  width:192px;
}

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

＆＃13;

＆＃13;

＆＃13;