CODEWITHSUNDEEP
cssword-wrap
Steve
Steve

Reputation: 1775

can't make CSS word-wrap: break-word work

I have a problem where a wide form button will not wrap to the next line when the browser width is less than the button when displayed on one line.

Jsfiddle

HTML:

<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">

CSS:

body {font-size: 16px;}
.gform_button.button {
  background-color: #E96E39;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  hyphens: auto;
  word-wrap: break-word;
  box-sizing: content-box;
  font-size: 1em;
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
  max-width: 100%;
}

How can I make the button wrap to the next line, and be at most 100% of the width of viewport?

Thanks.

Upvotes: 1

Views: 1799

Answers (3)

thepio
thepio

Reputation: 6263

Just add this line of css to your input with the button class:

white-space: normal;


body {
  max-width: 300px; // just to show the result
  font-size: 16px;
}

.gform_button.button {
  background-color: #E96E39;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  hyphens: auto;
  word-wrap: break-word;
  box-sizing: content-box;
  font-size: 1em;
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
  max-width: 100%;
  white-space: normal;
}
<input type="submit" onclick="" tabindex="26" value="Help me develop better solutions for small business" class="gform_button button" id="gform_submit_button_1">

Upvotes: 5

Harry Kitchener
Harry Kitchener

Reputation: 149

Set the width to 100% and the max-width to width of the button.

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It's an <input> tag, you can't make what you want, but you can change the tag to <button> and it works (you don't need the word-wrap because it's the default value):

https://jsfiddle.net/vqmo9ykg/8/

body {font-size: 16px;}
.gform_button.button {
	background-color: #E96E39;
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	hyphens: auto;
	box-sizing: content-box;
    font-size: 1em;
    color: #FFF;
    font-weight: 700;
    max-width: 200px;
  letter-spacing: 0.046875em;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
}
<button type="submit" class="gform_button button" id="gform_submit_button_1" tabindex="26" >Help me develop better solutions for small business</button>

Upvotes: 2

Related Questions