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

Question

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.

Answer 1

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">