CODEWITHSUNDEEP
htmlcsswebkit
Adriel
Adriel

Reputation: 128

HTML Input placeholder text-overflow: ellipsis does not work when on focus (webkit only)

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.

Upvotes: 2

Views: 4569

Answers (2)

ilya.chepurnoy
ilya.chepurnoy

Reputation: 515

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

Upvotes: 0

Gagich
Gagich

Reputation: 108

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.

Upvotes: 3

Related Questions