Text input remaining horizontally scrollable with "text-overflow: ellipsis" in Chrome

Question

I have a text input that I want to keep at a fixed width of 300px. The value of the text input is allowed to extend beyond what fits in this. When the text does extend beyond the bounds of the input I want the text to be truncated with ellipsis, but when focused the input should be horizontally scrollable.

This behaviour is all provided with text-overflow: ellipsis;. The problem is that when unfocused the input remains horizontally scrollable, but since the text is truncated it just scrolls into white space. How can I stop this from happening?

Testing the following code I get the issue in Chrome (108.0) but not Firefox or Safari. Is this just a characteristic of Chrome that can't be avoided?

<form>
  <input
    type="text"
    style="width: 300px; text-overflow: ellipsis"
    value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf"
  />
</form>

This is what it looks like when you scroll right: Image of unwanted behaviour.

I have tried adding overflow: hidden; and white-space: nowrap; to the input, as well as these attributes on the surrounding form, the div above the form and even a div surrounding the input within the form. All of these result in either the same behaviour or other behaviour outside of the specification described above.

There is this related question, but there is no satisfactory answer there and I have been able to narrow it down to being a Chrome problem... Input element scrollable with text-overflow ellipsis enabled

You could try using a text area instead and set its rows to 1 and resize: none — deadant88
– deadant88, Commented Dec 19, 2022 at 3:15

Jordan · Accepted Answer · 2022-12-19 03:27:15Z

1

I believe it's a known Chrome issue. You can work around it with a little bit of JavaScript, if that works for you?

You may want to look to target Chrome only.

//Locate all elements with class inputContainer
document.querySelectorAll('.inputContainer').forEach(container => {
  //Bind a click event to each of those elements (parent)
  container.addEventListener("click", function() {
    //Turn on pointer-events (defaulted to off in CSS) 
    //and focus to prevent need to double click for focus
    container.querySelector('input').style.pointerEvents = "auto";
    container.querySelector('input').focus();
  });
});

//Bind a blur event to all input fields to turn pointer-events back to "none"
document.querySelectorAll('input').forEach(input => {
  input.addEventListener("blur", function() {
    this.style.pointerEvents = "none";
  });
});

<form>
    <!-- Added container -->
    <div class="inputContainer">
      <input type="text" style="pointer-events:none;width: 300px; text-overflow: ellipsis" value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf" />
    </div>
</form>

edited Dec 19, 2022 at 3:27

answered Dec 19, 2022 at 3:09

Jordan

1,4973 gold badges10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ethan Fraser Over a year ago

While this does work to fix the scrolling issue, setting style.pointerEvents to none means you also can't click the input to edit it, which I need to be able to do.

Jordan Over a year ago

This is what container.addEventListener("click", function() { should achieve?

Ethan Fraser Over a year ago

I see what you mean. Unfortunately a parent div of the form already has a click listener, so they interfere with each other. Marking as correct because it would work if this wasn't the case.

Collectives™ on Stack Overflow

Text input remaining horizontally scrollable with "text-overflow: ellipsis" in Chrome

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related