Input element overflows the container

Question

The input overflows the parent container when the text is too long.

I am looking at how to wrap the text inside of the element. I tried word-break, text-wrap but nothing worked.

    <div>
      <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
    </div>

yes, change the button text – demkovych Sep 18 '19 at 09:43 — demkovych, Sep 18 '19 at 09:43
Probably the input has a padding-left? – Sfili_81 Sep 18 '19 at 09:48 — Sfili_81, Sep 18 '19 at 09:48
Could you show the CSS you have currently? – Jesse Sep 18 '19 at 09:48 — Jesse, Sep 18 '19 at 09:48

score 2 · Accepted Answer · answered Sep 18 '19 at 09:49

2

white-space:normal seems to work fine in Chrome, Firefox, IE and Edge …

div { width: 400px; }
input[type=submit] { white-space:normal; }

<div>
  <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>

answered Sep 18 '19 at 09:49

04FS

5,660
2
10
21

I needed the all the text to be visible. Adding ` white-space:normal;` did the trick! Thanks a bunch! – Tinabot Sep 18 '19 at 09:54

score 2 · Answer 2 · answered Sep 18 '19 at 09:50

Just specify a max-width on the button:

.submit {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  width: 300px;
}

<div class="container">
  <input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text" />
</div>

Notice that you can also style the overflow using the text-overflow property.

Input element overflows the container

2 Answers2