Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML: can I display button text in multiple lines?

Tags:

html

css

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?

like image 455
Dagang Avatar asked Sep 19 '11 09:09

Dagang


People also ask

How do I display text on multiple lines?

The correct way to do things is using things made for the things you need. If you want a line break (enter), use <br> ; If you want to define a paragraph, use <p> . Show activity on this post. According to this, the <br> element is used to insert a line break without starting a new paragraph.

How do I show multiple lines of text in HTML?

To create a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows.

How do I insert a line break in button text?

The easiest way to have a line break is using the <br> tag on your text. It is used for inserting a single line break.

How do I put text and button side by side in HTML?

One of the most simple solutions in your case is: Move the button inside the div. Remove width:200px; Add float:left; style to the div.


1 Answers

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; 
like image 154
Yhn Avatar answered Oct 03 '22 02:10

Yhn