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?

Koppel

why would you want a placeholder where some of the text is always obfuscated? ... placeholders are for user information and if part of one is never shown there's no point in it ever being there – Inspirational

The ellipsis only appears if the element containing the input field is too thin to display the entire placeholder. – Koppel

I think seeing the full placeholder is desired behaviour as it's a tip for the user to help them fill in the field - could you make an example in jsfiddle – Inspirational

The element containing the input field can be stretched and squished- won't make a complete fiddle because that behavior comes from a bunch of source files. Here's a fiddle that shows the ellipsis problem: jsfiddle.net/Lptt36ar/1 If the placeholder is completely visible, there should be no ellipsis, and the user should see the full placeholder. If the user shrinks the box so that only part of the placeholder is visible, there should be an ellipsis. Right now what I am doing works when the cursor is not in the input box, but when the cursor IS in the input box the ellipsis disappears. – Koppel

Also, .box:focus { text-overflow: ellipsis; } doesn't help – Koppel

firstly: a reduced jsfiddle is exactly what we want, we want to examine the problem, not the whole site; secondly: the css snippet there will not work on the placeholder – Inspirational

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.

Inspirational

Again, the container for this input box may change size, so just changing the size of the input box or the placeholder message won't work. I thought maybe setting a minimum size for the container might fix this, but I'm not allowed to because of the other stuff which will go underneath. – Koppel

i must admit i don't get the logic here, the placeholder needs to be visible so the user can view it, it would be like obscuring the last paragraph of a blog post, it might suit the style, but the user wouldn't be able to read it! – Inspirational

@ToniLeigh, but the browsers default functionality isn't helping in this anyway. So I don't get your argument. Try the fiddle, can you read the whole placeholder, even without text-overflow: ellepsis? jsfiddle.net/Lptt36ar/1 – Midlands

@Midlands my argument is that the placeholder (or equivalent user tip) has to be fully readable to be any use, hence the suggestion that the best way to solve this problem is to re-design things so you don't need to use an ellipsis on a placeholder - the crucial point is exactly that you cannot read the whole placeholder under any circumstances which renders it useless – Inspirational

@Midlands no, the browsers functionality isn't helping with this specific requirement, but the browsers functionality is designed to be usable, which the OPs request isn't - the browser is doing the right thing – Inspirational

@ToniLeigh if the browsers functionality was perfect we didn't need CSS and especially Javascript to accompany our HTML. The placeholder preferably is fully readable I agree. But in RWD one can never design for this. A placeholder is not a label and should never be used as one. Having a fully readable and even working placeholder is called progressive enhancement. OP can not be sure his placeholder works on older browsers either.... – Midlands

@Midlands we'd still need css and js, as the browser couldn't pre-empt all our specific styling and functional needs ... as for design, you're right, we need to cover as many cases as possible, but in this case it could easily be designed for, any of the three options I give would get around the problem of the small field – Inspirational

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/

Midlands

this doesn't answer the question and !important is always the worst option for over-riding in css – Inspirational

I didn't provide full working code that's correct. But it's an answer though.. I've added a fiddle to prove my case. Aa for !important, it's perfectly valid css and not the worst option but your last resort when it comes to overwriting user agent css in some cases. – Midlands

The fiddle seems only to work in FF, not in Chrome or Safari – Cheapjack

Things change in a timespan of 8 years.... – Midlands

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;
}

}

Cristen