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 d开发者_C百科isplay the text in multiple lines. Is it possible in html/css?
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;
Here are two options:
<button>multiline<br>button<br>text</button>
or
<input type="button" value="Carriage return separators" style="text-align:center;">
This CSS might work for <input type="button" ..
:
white-space: normal
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.
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>
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 
 to 
 start playing">
精彩评论