Have a break line in HTML element value

Question

I want to have a break in a button value on chrome, which used to work fine till their last update 3 weeks ago, since then, that stopped working:

<input type="button" value="line &#10; break" />

JSFiddle :

No line break

Does anyone have any new ideas to get this line break in an element value ??

You do that in order to have 2 lines of text inside the button? — zer00ne
– zer00ne, Commented Feb 17, 2016 at 21:27

zer00ne · Accepted Answer · 2016-02-17 21:37:19Z

2

input[type="button"] {
  white-space: normal;
  text-align: left;
  width: 6ch;
}

<input type="button" value="line break" />

You can use "white-space: normal" if you don't want to use <button> The width of the button could be set to the length of your longest word by the unit measurement ch one ch = width of one letter.

edited Feb 17, 2016 at 21:37

answered Feb 17, 2016 at 21:29

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

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

4 Comments

Roni Axelrad Over a year ago

Thank you , adding that CSS to the input indeed created a new line where I needed (After 
) Thank you !

zer00ne Over a year ago

Your'e most welcome, sir. I added some extra styles just in case the whitespace: normal looks funky.

Roni Axelrad Over a year ago

It definitely solved my issue. But i'm thinking, if for a reason i wanted a break of line in the value of that button regardless of the input width, that would be impossible eh ?? I don't know why Chrome updated their browser to ignore 


zer00ne Over a year ago

Yes you'd have to set the width of button. In my update, the longest word is "break" which is 5 letters, so I set it to 6ch which is 6 letter widths long. Only the Chrome team knows why they do the things they do, us mere mortals could not comprehend.

rvillar · Accepted Answer · 2016-02-17 21:27:09Z

2

How about?

<button>
<span>Line 1</span><br/>
<span>Line 2</span>
</button>

answered Feb 17, 2016 at 21:27

rvillar

765 bronze badges

1 Comment

Roni Axelrad Over a year ago

That's a cool idea, but i need to keep using <input> because it implemented too deep in my scripts,css etc..Thank You !

Rguarascia · Accepted Answer · 2016-02-17 21:38:27Z

0

Instead of using

<input type="button" />

You should use the button tag instead, which in turn you can use the HTML <br/> tag to make your line break. This should work on all browsers as this is a valid HTML code.

<button>
   Line<br/> 
   Break
</button>

answered Feb 17, 2016 at 21:38

Rguarascia

1933 silver badges20 bronze badges

Collectives™ on Stack Overflow

Have a break line in HTML element value

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related