0

I have an issue in MS IE (ver. 11) for text-overflow: ellipsis; property for input field, where it doesn't seem to work only for this particular browser (IE).

Any suggestions would be helpful.

Fiddle: https://jsfiddle.net/TjGyz/362/

input, div {
    width: 100px;
    border: 1px solid silver;
    padding: 5px;
    margin-bottom: 10px;
    outline: none;
    font: 20px sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<input type="text" value="This element is an input" />
Hitesh Misro
  • 3,397
  • 1
  • 21
  • 50
  • Possible duplicate of [text-overflow:ellipsis doesn't work on IE](https://stackoverflow.com/questions/14664195/text-overflowellipsis-doesnt-work-on-ie) – Pedram Dec 20 '17 at 07:12
  • @Mr.x I need this for `input` field and your reference link doesn't seem to solve my problem. – Hitesh Misro Dec 20 '17 at 07:16
  • It will work if input is readonly mode in IE. If you want to rewrite in that use jquery to toggle the attribute readonly. refer https://frontendtricksandmagic.wordpress.com/2015/03/07/how-to-make-text-overflow-ellipsis-work-for-inputs-in-ie/ – Ram_UI Dec 20 '17 at 07:38

1 Answers1

4
<input type="text" value="This element is an input" readonly/>

https://jsfiddle.net/kvuvkzeL/

Make it editable :

    $( '.INPUT_CLASS' ).on( 'click', function() {
        $( this ).prop( 'readonly', '' );
        $( this ).focus();
    })

    $( '.INPUT_CLASS' ).on( 'blur', function() {
        $( this ).prop( 'readonly', 'readonly' );
    })
Akim Benchiha
  • 150
  • 1
  • 12