HTML: can I display button text in multiple lines?

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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;

Solution 2 - Html

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;">

Solution 3 - Html

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

white-space: normal

Solution 4 - Html

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.

Solution 5 - Html

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>

Solution 6 - Html

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">
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Debugging Javascript on iPad

JavascriptIpadFirebugFirebug Lite

Next Solution:

What does a dot before the variable name in struct mean?

CLinuxKernel

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDagangView Question on Stackoverflow
Solution 1 - HtmlYhnView Answer on Stackoverflow
Solution 2 - Htmlm.edmondsonView Answer on Stackoverflow
Solution 3 - HtmlAlex KView Answer on Stackoverflow
Solution 4 - HtmlAllan Kimmer JensenView Answer on Stackoverflow
Solution 5 - HtmlSijo JoseView Answer on Stackoverflow
Solution 6 - HtmlNooNa MarJaView Answer on Stackoverflow