How to Apply Line Break in an HTML Button?

Hello, Everyone! Good Day!! Today I am going to share with you the most important tricks of using large text in your button with your desired width. This is the simple and very easier way to wrap your button, hyperlink and input button’s descriptive text.

On a standard button, the text doesn’t wrap by default. This is can be a bit of pain when you need to express something more descriptive instead of distinctive “Add”, “Delete”, “Register” or whatever. The default characteristics of a button are to fit the width with text length in it.

Example of default button with large text –

See the Pen Button With Line Breaks by Pavel (@bdpavel) on CodePen.light

 

Definitely, you don’t need this one, right? Applying a CSS width property, you can set the width but not get the wrapped content, it just looks like below –

I am sure you don’t need this one as well and you are getting wounded! You might be trying something altering your display, but you won’t get the actual. So in this situation, just using CSS white-space tag and set the value to normal.

That’s it! See what happened to the above code.

Absolutely you are thinking to get something like this. You’re done!

See the complete example on codepen –

See the Pen Button With Line Breaks by Pavel (@bdpavel) on CodePen.light

 

By the way, this doesn’t work for IE6. If you need to support of this just change the value to break-word. See the example –

CSS white-space property guideline

Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
inherit Specifies that the value of the white-space property should be inherited from the parent element

Some others useful links to help you to get more descriptive–