How do I get text to wrap in an input button?

HTML & CSS
1

I am using this CSS to try to wrap text in a button:

input[type="button"] {
    border:0;    
    font-size:1em;
    border:#ccc solid 1px;  
    border-radius:8px;
    padding:.2em;
    float:left;
    margin:.3em;
    -webkit-appearance:normal;
	word-wrap: break-word;
	line-height: 2em;
}

But the text simply continues to the edge of the button and the rest is truncated.

2

I added white-space: normal; and it still doesn’t wrap in mobile.

3

This actually works on desktop on Firefox. Not working in Samsung Chrome.

4

Use the button element instead. :winky:

HTML:-

<button>This is a button element</button>

CSS:-

button { 
    display: block;
    width: 3em;
    line-height: 2em;
    padding: 0.2em;
    margin:0.3em;	
    border: 1px solid  #ccc ;  
    border-radius: 8px;
    -webkit-appearance:normal;
    font-size: 1em;
    word-wrap: break-word;
 }

coothead

1 Like
5

That works! Thanks.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.