文本溢出在 Safari 中不应该隐藏文本

Question

我想在容器中放置各种标签，并在标签文本太大时（即超出容器宽度时）让它们显示省略号。我面临的问题是，在 Safari 中，即使标签有显示完整内容的空间，也会显示省略号。

这是显示我要实现的目标的代码：

.tag {
  height: 30px;
  background: #F67;
  line-height: 30px;
  display: block;
  float: left;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  margin: 5px 5px 0;
  border-radius: 16px;
}
.content {
  float: left;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  float: right;
  background: blue;
  width: 20px;
  text-align: center;
  color: white;
  text-decoration: none;
}
.container {
  border: 2px solid blue;
  width: 300px;
  height: 400px;
  padding: 10px;
}

<div class="container">
  <div class="tag">
    <span class="content">Some tag</span>
    <a href="#" class="icon">X</a>
  </div>
  <div class="tag">
    <span class="content">Some tag</span>
    <a href="#" class="icon">X</a>
  </div>
  <span class="tag">
        blahbsalkfnewijfnewifbwiefnbijfneifjnweifniwjenfewi
      </span>
  <div class="tag">
    <span class="content">Some tags</span>
    <a href="#" class="icon">X</a>
  </div>
</div>

如果您在 Safari 中运行上面的代码片段（我使用的是 v8.0.8），您可以看到最后一个标签显示省略号，即使它仍然有空间来拉伸和显示全文。如果您看不到我在说什么，这里是问题的屏幕截图：

关于“X”的小提一下是它的目的是作为一个图标，有人可以点击并删除标签，但该功能不是这个问题的主题。

Answer 1

我正在使用这个技巧：在文本之后添加一个不间断空格。您可以将它直接添加到您的 html 中，例如

<div class="ellipsis">Test&nbsp;</div>

或者您可以使用

:after

伪元素。这是我正在使用的

.ellipsis

类：

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

.ellipsis:after {
  content: "\0000a0";
  display: inline-block;
  width: 0;
}

:after

的使用还有另一个好处，它通过设置

width: 0;

被隐藏，所以你不会注意到这个元素和它旁边的东西（另一个元素或边框）之间有更大的差距。

Answer 2

当你从你的

.content

元素中删除以下几行时，它对我来说工作正常。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

示例：http://codepen.io/WartClaes/pen/ZQxaKW?editors=1100

编辑：尽管进一步观察时我发现您并不总是使用相同的 HTML 结构？这导致双文本溢出声明。总是使用相同的结构是不可能的吗？

Answer 3

您需要为文本添加“宽度”，一直到文本溢出：

宽度：100%； /或者你需要的尺寸/

它在 safari 13 中对我有用。

Answer 4

letter-spacing: -1px;

这解决了我的问题，但其他浏览器看起来很拥挤