html - 截断的文本在 Mozilla 中表现不同

Question

我有一个容器，它有一个字符串文本(可能很长)和一个 float 内联元素，如图所示 here .

HTML

<div class="container">
  <span>RIGHT</span>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>

CSS

span {
  float: right;
  border-radius: 2px;
  background-color: #26a69a;
  padding: 0 6px;
}

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

如果字符串文本很长，它会被截断，这在 chrome 中工作正常。另一方面，在 mozilla 上运行它会显示 float 内联对象后面(前面)的截断文本。有人可以向我解释为什么会这样以及如何纠正它。

Answer 1

每当您提供 text-overflow: ellipsis ，您需要将固定宽度应用于说明浏览器的容器以使其成为 ellipsis在那个固定宽度之后。

Chrome 一般会继承父级或容器的固定宽度并应用属性。但是，您需要在 Firefox 中手动提及它。

对于 ellipsis , 如果您更改结构以将文本内容包含在 span 中也会更好或 div .

检查更新fiddle .

引用代码:

span {
  float: right;
  border-radius: 2px;
  background-color: #26a69a;
  padding: 0 6px;
}

.wrapper {
  width: 540px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
}

<div class="container">
  <span>RIGHT</span>
  <div class="wrapper">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  </div>
</div>