css - 文本溢出在 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)中运行上面的代码片段，您可以看到最后一个标签显示省略号，即使它仍然有空间来拉伸(stretch)和显示全文。如果您看不到我在说什么，这里是问题的屏幕截图: text-overflow problem on safari image

关于“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;隐藏起来，因此您不会注意到此元素与其旁边的东西(另一个元素或边框)之间有较大的间隙。