Firefoxは、私は本当にあなたの助けを必要とする私のテキスト

Question

食べます。私は（現在のバージョンは45.0です）Firefoxブラウザのバグを打つことができません。特定されていない状況では、テキストブロックの一部が失われます。

のFirefoxとChromeブラウザで次のコードをチェックアウトし、それを理解すること。

.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>

クール！あなたは「短い量の例」でFirefoxで見ることができるように - （。しかし、Chromeは働い罰金=！）何の番号=はありません

それを修正するために私を助けてください！

Answer 1

は省略記号が動作するようにしても、すべての山車が指定する必要のためにあなたが幅を指定する必要が

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

にご.amountクラスを変更します。

はfiddle