html - 跨浏览器兼容性 : Get Chrome overflow ellipsis behavior in Firefox

Question

我想得到完全相同的 overflow: hidden 和 text-overflow: ellipsis 行为，我在 Chrome 中得到的，但在 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 中工作