テキストオーバーフロー省略記号はFirefoxのすべてのテキストを非表示にします

Question

私はこのアイテムのコレクションを持っています。テキストが長すぎると、それは完全に置き換えられずに...でトリムされることを期待しています。この問題はFirefoxで発生します。すべての必要なCSSアイテムがあります

overflow: hidden 

white-space: nowrap 

max-witdh: 400px 

私は何が欠けていますか？ここで

が問題である：

HTML：

<div class="form-group disabled" data-bind="css:{'disabled': !$root.item.Used()}"> 
    <label> 
    <input class="form-control" data-bind="enable: $root.item.Used, checked: Used, attr: { 'data-option': Value }" disabled="" data-option="Letter tab,Legal 9x11,Tab (Indent: 2.50 mm),Cyclic (5),163 g/m2,Plain,White" type="checkbox"> 
    <span class="control-label" data-bind="text: Value()!=''? Value() : Name()">Letter tab,Legal 9x11,Tab (Indent: 2.50 mm),Cyclic (5),163 g/m2,Plain,White</span> 
    </label> 
</div> 

計算さCSS：

Answer 1

おそらく作業コードは、より良い私たちを助けます。しかし、あなたのHTML/CSSを再現しようとすると、クロムとFFで作業しているようです。

HTML

<div> 
    <label> 
    <input type="checkbox"> 
    <span>Letter tab,Legal 9x11,Tab (Indent: 2.50 mm),Cyclic (5),163 g/m2,Plain,White</span> 
    </label> 
    <br/> 
    <label> 
    <input type="checkbox"> 
    <span>Letter tab,Legal 9x11,Tab (Indent: 2.50 mm),Cyclic (5),163 g/m2,Plain,White</span> 
    </label> 
    <br/> 
    <label> 
    <input type="checkbox"> 
    <span>Letter tab,Legal 9x11,Tab (Indent: 2.50 mm),Cyclic (5),163 g/m2,Plain,White</span> 
    </label> 
    <br/> 
</div> 

CSS

label { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    max-width: 100px; 
    text-overflow:ellipsis; 
} 

https://jsfiddle.net/3y0wnxuo/3/