kann nicht CSS-Word-Wrap machen: Break-Word-Arbeit

Question

Ich habe ein Problem, wo ein breiter Formular-Button nicht in die nächste Zeile umbrechen wird, wenn die Browserbreite kleiner ist als die Schaltfläche in einer Zeile angezeigt.

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

Wie kann ich die Taste Wrap in der nächsten Zeile zu machen, und seine höchstens 100% der Breite des Ansichtsfensters ?

Danke.

Answer 1

Fügen Sie einfach diese Zeile von CSS Ihre Eingabe mit der button Klasse:

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

Es ist ein <input>-Tag, können Sie nicht machen, was Sie wollen, aber Sie kann das Tag zu <button> ändern und es funktioniert (Sie benötigen nicht die word-wrap, weil es der Standardwert ist):

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

die Breite auf 100% und die max-Breite zur Breite der Taste.