-2

I have this collection of items and if the text is too long, I'm expecting it to be trimmed with ..., not replaced entirely. This problem appears in Firefox. All required css items are there 

overflow: hidden

white-space: nowrap

max-witdh: 400px

What am I missing?

Here is the issue:

enter image description here

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>

Computed CSS:

enter image description here

Alexandru Pupsa
  • 1,798
  • 4
  • 21
  • 40

1 Answers1

0

Probably a working code will help us better. But trying to recreate your html/css it seems to working on chrome and 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/

Baro
  • 5,300
  • 2
  • 17
  • 39
  • You're right... I think it might be related with the CSS on the input, because when removing the input in the browser, it works fine. – Alexandru Pupsa Sep 19 '17 at 14:03