CODEWITHSUNDEEP
htmlcss
Dagang Wei
Dagang Wei

Reputation: 26548

HTML: can I display button text in multiple lines?

I have a button with long text like "Click here to start playing". I want to control the width and display the text in multiple lines. Is it possible in html/css?

Upvotes: 72

Views: 173529

Answers (6)

m.edmondson
m.edmondson

Reputation: 30922

Here are two options:

<button>multiline<br>button<br>text</button>

or

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">

Upvotes: 48

Sijo Jose
Sijo Jose

Reputation: 235

one other way to improve and style the multi-line text is

 <button>Click here to<br/> 
     <span style="color:red;">start playing</span>

   </button>

Upvotes: 5

Yhn
Yhn

Reputation: 2815

Yes, you can have it on multiple lines using the white-space css property :)

input[type="submit"] {
    white-space: normal;
    width: 100px;
}
<input type="submit" value="Some long text that won't fit." />

add this to your element

 white-space: normal;
 width: 100px;

Upvotes: 147

NooNa MarJa
NooNa MarJa

Reputation: 545

You can break a text using an entity in between the value. See the entity in example below:

<input style="width:100px;" type="button" value="Click here &#x00A; to &#x00A; start playing">

Upvotes: 0

Alex K
Alex K

Reputation: 7237

This CSS might work for <input type="button" ..:

white-space: normal

Upvotes: 26

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

Yes it is, and you can also use it like this 

<button>Click here to<br/> start playing</button>

if you want to make the break yourself.

Upvotes: 10

Related Questions