Truncated text behaving differently in Mozilla

Question

I have a container that has a string text (which could be very long) and a floating inline element as depicted 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;
}

In case the string text is long it gets truncated and this works fine in chrome. Running it on mozilla, on the other hand, displays the truncated text behind(in front) of the floated inline object. Could someone please explain to me why this is so and how to correct it.

Answer 1

Whenever you are providing text-overflow: ellipsis, you need to apply fix width to the container stating the browser to make it ellipsis after that fixed width.

Chrome generally inherits the fix width of the parent or container and applies the properties. However, you need to manually mention it in Firefox.

For ellipsis, its also better if you change the structure to have the text content inside a span or a div.

Check updated fiddle.

Refer code:

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>