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

Question

我有一个容器，其中包含一个字符串文本（可能很长）和一个浮动内联元素，如图所示 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 上显示浮动内联对象后面（前面）的截断文本。有人可以向我解释为什么会这样以及如何纠正它。

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>

Answer 2

请试试这个

 body{
        float: left;
        margin: 0;
        max-width: 100%;
    }
.container {
    box-sizing: border-box;
    display: block;
    float: left;
    overflow: hidden;
    padding-right: 80px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:100%;
   
}

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

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

JS Fiddle 演示：https://jsfiddle.net/geogeorge/gzjf2psq/6/

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

Truncated text behaving differently in Mozilla

html

css

mozilla