8

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?

random_stuff
  • 197
  • 2
  • 12
  • 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 – Toni Leigh Jun 17 '15 at 16:20
  • The ellipsis only appears if the element containing the input field is too thin to display the entire placeholder. – random_stuff Jun 17 '15 at 16:29
  • 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](http://jsfiddle.net/) – Toni Leigh Jun 17 '15 at 16:43
  • 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: http://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. – random_stuff Jun 17 '15 at 17:16
  • Also, .box:focus { text-overflow: ellipsis; } doesn't help – random_stuff Jun 17 '15 at 17:20
  • 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](http://stackoverflow.com/a/2610741/1249829) – Toni Leigh Jun 17 '15 at 17:34

3 Answers3

2

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.

Toni Leigh
  • 4,830
  • 3
  • 22
  • 36
  • 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. – random_stuff Jun 17 '15 at 18:17
  • 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! – Toni Leigh Jun 17 '15 at 18:33
  • @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? http://jsfiddle.net/Lptt36ar/1/ – Bartezz Oct 24 '15 at 20:02
  • @Bartezz 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 – Toni Leigh Oct 24 '15 at 20:10
  • @Bartezz 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 – Toni Leigh Oct 24 '15 at 20:16
  • @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.... – Bartezz Oct 25 '15 at 10:55
  • @Bartezz 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 – Toni Leigh Oct 25 '15 at 11:54
0

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/

Bartezz
  • 474
  • 4
  • 13
  • this doesn't answer the question and `!important` is always the worst option for over-riding in css – Toni Leigh Oct 24 '15 at 20:08
  • 1
    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. – Bartezz Oct 25 '15 at 10:50
0

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

}

Cream Whipped Airplane
  • 1,305
  • 3
  • 13
  • 31