跨浏览器兼容性：在Firefox中获取Chrome溢出省略号行为

Question

我希望获得与Chrome相同的overflow: hidden和text-overflow: ellipsis行为，但在Firefox中也是如此。我正在寻找css解决此问题的方法。

在Chrome中，当标签的宽度减小时，文本将被隐藏并替换为省略号，但在Firefox中，文本将隐藏到文字的第一个字母。有关此示例，请参阅以下图像。

Chrome示例：

Firefox示例：

以下代码段将允许您查看浏览器之间的问题：

.resizable {
  resize: both;
  overflow: auto;
  display: flex;
  height: 40px;
  width: 400px;
}

.wrapper {
  border-left: 4px solid #dcdedf;
  margin: 0 8px 5px 0;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 29px;
  max-height: 15px;
}

.chip {
  border: 1px solid #dcdedf;
  border-left: none;
  font-family: Roboto, sans-serif;
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0 4px 4px 0;
  white-space: nowrap;
  overflow: hidden;
  max-height: 15px;
  text-overflow: ellipsis;
  padding: 0 8px;
  font-size: 10px;
  word-break: break-all
}

<div class="resizable">
  <div class="wrapper" style="border-color: #ffce00">
    <span class="chip">Privileged</span>
  </div>
  <div class="wrapper" style="border-color: #00abf3">
    <span class="chip">Escalated</span>
  </div>
  <div class="wrapper" style="border-color: #ba47e2">
    <span class="chip">Outside Council</span>
  </div>
  <div class="wrapper">
    <span class="chip">Sanity, Regression</span>
  </div>
</div>

我已经查看了有关堆栈溢出的相关问题（Make text-overflow ellipsis work similary in firefox and chrome，CSS text-overflow: ellipsis; not working?，CSS Multi Line ellipsis Cross Browser等等），但它们似乎是不同的问题。

非常感谢，

克里斯

Answer 1

您需要在其中添加white-space: nowrap;才能在firefox中使用