How to use text-overflow ellipsis in an html input field?

My web page has input fields to which I have applied the following css :

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

But this doesn't seem to have any effect. Am I missing something obvious here or is it not possible to have an ellipsis in an input field using CSS only?

Solution 1:

I know this is an old question, but I was having the same problem and came across this blog post from Front End Tricks And Magic that worked for me, so I figured I'd share in case people are still curious. The gist of the blog is that you CAN do an ellipsis in an input in IE as well, but only if the input has a readonly attribute.

Obviously in many scenarios we don't want our input to have a readonly attribute. In which case you can use JavaScript to toggle it. This code is take directly from the blog, so if you find this answer helpful you might consider checking out the blog and leaving a comment of appreciation to the author.

// 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');
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
  <input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>

Solution 2:

Setting text-overflow:ellipsis on the input itself did the trick for me. It truncates and places the ellipsis when the input is out of focus.

Solution 3:

From my testing Chrome, Safari and Firefox now support it.

However they do have slightly different effects.

On blur Firefox appends ... to the right of the text but only if there is any text hidden by the right hand side of the text box.

Whereas on blur Chrome seems to jump to the beginning of the text and appends the ... at the end, regardless of where you left the scroll position of the text.