How to make ‘text-overflow: ellipsis’ work for inputs in IE

A simple explanation how to make overflow: ellipses work in Internet Explorer.

Months ago I had to stylize inputs with fixed width, but very long content. I wanted to show an ellipsis (“…”) to represent the clipped text.

<div class="long-value-input-container">
	<input type="text" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long-value-input" readonly />
</div>  

To do so i used this CSS rule:

		.long-value-input {
			width: 200px;
			height: 30px;
			padding: 0 10px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		

It worked just fine in Chrome, but in IE the ellipsis were not shown.

After several days in struggle I found a simple solution. To display them the input had to have the readonly attribute. But what if I wanted to write in it? I decided to use javascript to toggle its attribute value everytime when click and blur events are fired.

		// making the input editable
		$( '.long-value-input' ).on( 'click', function() {
		    $( this ).prop( 'readonly', '' );
		    $( this ).focus();
		})

		// making the input readonly
		$( '.long-value-input' ).on( 'blur', function() {
		    $( this ).prop( 'readonly', 'readonly' );
		});
		

Working example:
https://github.com/marianadgeorgieva2/How-to-make-text-overflow-ellipsis-work-for-inputs-in-IE.git