0

I have the following situation:

HTML:

 <input class="BWForm_form-control BWTextBox" disabled="disabled" id="something" title="Test Firma" type="text" value="Test Firma 11111111111111111111111111111"></input>

CSS:

    // trunicate text with "..." 3 dots, if the content is larger than the current width
input[disabled="disabled"]{
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}

In IE and chrome it doesnt work, except in FireFox.

I tried also: text-overflow:ellipsis doesn't work on IE, text-overflow: ellipsis not working

But it didn't take affect..

It would be nice without having a fixed width, because the width of these input fields are different.

Ty for helping

Community
  • 1
  • 1
user254197
  • 883
  • 2
  • 9
  • 31

1 Answers1

0

Try with this:

input[disabled="disabled"] {
    display: inline-block;
    max-width: 100px; /* Set a size */
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0px;
    padding-top: 0px;
}
Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • If you have to set ellipsis you must set a width...the size matters in ellipsis :) – Luís P. A. Jun 04 '14 at 08:13
  • Strange, it should work on IE...what version you use? You can check here the use of ellipsis on IE - http://msdn.microsoft.com/en-us/library/ie/ms531174%28v=vs.85%29.aspx – Luís P. A. Jun 04 '14 at 08:40
  • I checked it against IE 7,IE 8,IE 9 and IE 10 and none of them is working with it ... – user254197 Jun 04 '14 at 08:47
  • Try this fix: input[disabled="disabled"]:before { content: ''; /* IE ellipsis fix */ } – Luís P. A. Jun 04 '14 at 08:50
  • I inserted this input[disabled="disabled"]:before { content: ''; /* IE ellipsis fix */ } infront of my existing "input[disabled="disabled"]", but I can't see any changes ... – user254197 Jun 04 '14 at 09:05
  • Hmmm...IE is so tricky...try implement this rule too in the style - word-wrap: break-word; – Luís P. A. Jun 04 '14 at 09:10
  • hmm.. right now the relevant code looks like this: "input[disabled="disabled"]:before { content: ''; word-wrap: break-word;/* IE ellipsis fix */ } //problems in IE input[disabled="disabled"] { display: inline-block; max-width: 100px; /* Set a size */ ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-wrap: break-word; /**/margin-top: 0px; padding-top: 0px; } " it does not matter wether I remove this "word-wrap: break-word;" ... – user254197 Jun 04 '14 at 10:03
  • the vendor prefix usually begins with `-` so how about `-ms-text-overflow: ellipsis;` instead of `ms-text-overflow: ellipsis;`? – Artjom B. Jun 04 '14 at 12:51
  • @ArtjomB. You are right...my fault...sorry and thanks... i will edit my solution – Luís P. A. Jun 04 '14 at 12:55