не может сделать CSS-перенос: работа с прерывистым словом

Question

У меня проблема с тем, что кнопка большой формы не будет переноситься на следующую строку, когда ширина браузера меньше, чем кнопка, если отображается на одной строке.

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%; 
} 

Как я могу сделать кнопку обертку на следующую строку, и быть не более 100% от ширины окна просмотра ?

Спасибо.

Answer 1

Просто добавьте эту строку CSS к введенному с button класса:

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

Answer 2

Это <input> тег, вы не можете сделать то, что вы хотите, но вы может изменить тег на <button>, и он работает (вам не нужен word-wrap, потому что это значение по умолчанию):

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

body {font-size: 16px;} 
 
.gform_button.button { 
 
\t background-color: #E96E39; 
 
\t border-radius: 1em; 
 
\t -moz-border-radius: 1em; 
 
\t -webkit-border-radius: 1em; 
 
\t hyphens: auto; 
 
\t 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>

Answer 3

Установите ширину до 100% и макс ширины к ширине кнопки.