Ellipsis on focused input

Question

I have an input element with a placeholder which needs a CSS ellipsis. When there is no focus on the input, the ellipsis works correctly, but when I click on the input field, the ellipsis disappears and I see the full placeholder. How do I prevent that from happening?

Answer 1

The browser's default functionality is to show the whole placeholder on focus and there is good reason for this.

The purpose of a placeholder is to give the user information about the field and as such every character should be available for the user to read, even if goes outside the box.

In your example (which I've edited here to demonstrate how to style placeholders) you can see that there is information in the placeholder that can never be seen - by viewing your field I'll just be left thinking 'Search intent names and display ... what'?

In fact, text-overflow: ellipsis; won't apply - it's block level and the placeholder can't be considered to have overflowed it's container because of it's nature (it's as big as it needs to be).

Some solutions:

1. make the text field bigger.
2. make the placeholder more concise (I'm guessing you could drop the 'and display examples').
3. put the tip outside the field, by using a pop-up on focus, or just a line of text above or below.

All of these options put the user first, i.e. it's more important that the user has all the information they need clearly displayed and this sort of thing should inform the design and development decisions.

Answer 2

Overwrite with !important

&[placeholder] {
    overflow: hidden;  
    text-overflow:ellipsis !important;
    white-space: nowrap;
}
&::placeholder {
    overflow: hidden;  
    text-overflow:ellipsis !important;
    white-space: nowrap;
}

See working example here, tested in Chromium: http://jsfiddle.net/Lptt36ar/9/

Answer 3

EDIT: aha, it works in FF, but not in Chrome..

What is really weird that in the fiddle it indeed does work. I've set the width of the input to be 20% so if you resize your screen you can see the placeholder getting cut off and replaced with ellipsis. Even when it has focus.

But for some reason I'm not able to replicate this in my app.. Once I focus the input the entire placeholder is shown. Anyone know why that could be?

http://jsfiddle.net/Lptt36ar/23/

SCSS

input {
display: inline-block;
margin: 0;
outline-color: rgb(0, 0, 0);
outline-offset: 0px;
outline-style: dashed;
outline-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 20%;
&[placeholder] {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
&::placeholder {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

}