HTML input field placeholder text cut off at the end

Question

I have an HTML input form with a field with placeholder text that gets cut off at the end, beyond the padding.

I can't locate what's causing it.

Answer 1

Answering my own question. It turns out it is not caused by any of my custom CSS:

It turns out it is caused by the Chrome "X" button in the input field:

The only way to remove this is to add the experimental CSS pseudo-element ::-webkit-search-cancel-button and set its display to none. I won't be doing this though.

::-webkit-search-cancel-button {
    display: none;
}

Sharing this to help anyone else.

Answer 2

You can also make use of text-overflow: ellipsis;. The text-overflow CSS property sets how hidden overflow content is showed to users. It can be clipped, display an ellipsis ('…'), or display a custom string. You can refer to the kink below to see an example:

text-overflow in textbox