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

Question

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?

Moral

Just checked and text-overflow:ellipsis works great on input elements (at least in Chrome) – Nailhead

The accepted answer doesn't seem to actually answer this question. – Taddeusz

Answer 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>

Taddeusz

.click() doesn't work when you're tabbing through controls, and if you move the prop removal to .focus(), that comes with it's own set of issues (doesn't actually remove the readonly property since it's still got focus) – Treacherous

I have used a similar code but it's not working on IE. If you know about solution on ie, please comment. – Mckinnon

Answer 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.

Obovoid

Also needed the white-space:nowrap and overflow:hidden to make it work codeply.com/go/xyUMETlNgs – Corpuscle

Answer 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.

Stryker

Firefox can render text-overflow characters on both sides of the input field when defining two values, like text-overflow: ellipsis ellipsis;. Chrome seems to have problems with that. – Parley

This seems to stop working when the width is almost the width of the input's parent. – Ormuz

Answer 4

A field is an element with its own rules. The input field is implemented in the way that if the text gets longer than the field, the text gets just unseen.

The reason for this is, if you use the field in a form and it would be possible to use text-overflow ellipsis, then it would only transmit the truncated content, what is not the wanted effect.

Susuable

a) firefox 16 renders an ellipsis (at wrong position), when input field hasn't focus b) the reason is totally wrong, whats displayed has nothing to do with whats in the dom (and thus transmitted) c) having an ellipsis marker when not focused is (arguably) best from a usability pov – Er

Chrome renders ellipsis too when the textbox isn't focused. If you want to change your "lack of facts" answer I'd love to remove the downvote i've given you! – Elzaelzevir