Firefox eats my text

Question

I really needs your help. I can not beat a bug in a Firefox browser (current version is 45.0). Under certain unknown conditions, part of the text block is lost.

To understand it, check out the following snippet in Firefox and Chrome browser.

.fluid {
  font-family: sans-serif;
  text-align: center;
  padding: 10px 0;
  background-color: #ccc;
  margin-bottom: 30px;
}
.price {
  float: left;
  margin-right: 5px;
  color: #454545;
}
.valuta {
  float: right;
  font-weight: bold;
  margin-left: 5px;
  color: #161616;
}
.amount {
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  font-weight: bold;
  color: #161616;
}
.align {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  max-width: 100%;
}
.center-block {
  margin: 0 auto;
  width: 300px;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}

<!-- This is an example especially for comparison of Firefox browser display it in other browsers. The amount field is not displayed correctly in Firefox free browser, with a portion of the text is lost -->

<!-- Short amount example -->
<div class="fluid">
  <div class="center-block">
    <div class="align clearfix">
      <div class="price">Price:</div>
      <div class="valuta">$</div>
      <div class="amount">25 600</div>
    </div>
  </div>
</div>

<!-- Long amount example -->
<div class="fluid">
  <div class="center-block">
    <div class="align clearfix">
      <div class="price">Price:</div>
      <div class="valuta">$</div>
      <div class="amount">25 600 25 600 25 600 25 600 25 600 25 600 25 600 25 600</div>
    </div>
  </div>
</div>

<!-- Long amount without spaces example -->
<div class="fluid">
  <div class="center-block">
    <div class="align clearfix">
      <div class="price">Price:</div>
      <div class="valuta">$</div>
      <div class="amount">1234567890000000000000000000000000000000000000000000000</div>
    </div>
  </div>
</div>

Cool! As you can see with Firefox in "short amount example" - There are no numbers =(. But Chrome working fine! =)

Please help me to fix it!

Answer 1

Modify your .amount class to

.amount {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    color: #161616;
    max-width: 200px;
    float: left;
}

You need to specify width for ellipsis to work and also all the floats need to specified.

See working fiddle