Question

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果您在Safari中运行上面的代码段（我正在使用的是v8.0.8），您可以看到最后一个标记显示省略号，即使它仍有空间可以拉伸并显示全文。如果你在这里看不到我在说什么，那就是问题的截图： text-overflow problem on safari image

小提及＆＃39; X＆＃39;这是一个图标，有人可以点击并删除标签，但该功能不是这个问题的主题。

Answer 1

我正在使用这个技巧：在文本后面添加一个非中断空格。您可以将其直接添加到html中，例如<div class="ellipsis">Test </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;

示例：base64Encode

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

Answer 3

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

宽度：100％； / 或您需要的尺寸 /

它在Safari 13中对我有效。

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

3 个答案: