2

In webkit-based browsers (Google Chrome & Safari), when I try to show placeholder text in an input element, if the placeholder is too long, I want to use text-overflow: ellipsis css to show "..." to cut the text.

This works at first, but when I click the input element before I type anything, the placeholder is still showing but not the ellipsis.

Example: https://jsfiddle.net/cqsguwpm/1/

Note that this does not happen in Firefox, so I assumed this issue happens on webkit-based browsers only.

As shown in the example, I've tried adding text-overflow: ellipsis rule to .input:focus::placeholder { } and .input:active::placeholder { } too, because I suspected the focus and active styles had overwritten the ellipsis rule, but apparently it still doesn't work

I need to know whether this one is possible to do or not in webkit-based browser, since I'm guessing this might just be one of the shortcomings of webkit.

Adriel
  • 128
  • 2
  • 8

2 Answers2

3

After fiddling around with your jsfiddle, I'm at a loss as to why that happens. Nothing is impossible, but after many years of hacking bugs with CSS, I'd probably not pursue this one any further. If you really need an ellipsis, try this: 

<input type="text" placeholder="it's a really long placeholder"><span></span>

.search-bar {
  overflow: hidden;
  text-overflow: ellipsis;
}
span {
  margin-left: -15px;
  background: #fff;
}
input:focus + span::after {
  content: "...";
}

You will have to play with the font-size, font-family, and color to get it just right.

Gagich
  • 108
  • 1
  • 9
  • Thanks for the answer, I gave up on trying to fix this since it seems to be a difference of implementation between webkit-based browsers and firefox. So nothing we can do for now besides doing those kind of hacks, which I prefer not to do... – Adriel Feb 04 '19 at 02:33
0

Chrome always shows the full placeholder when the input is in focus. Pls check here: https://stackoverflow.com/a/74068870

ilya.chepurnoy
  • 332
  • 4
  • 9