文本溢出省略号隐藏了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似乎正在使用chrome和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/