不能使CSS自動換行：分詞工作

我有一個問題，當一行中顯示的瀏覽器寬度小於按鈕時，寬表單按鈕不會換行到下一行。不能使CSS自動換行：分詞工作

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％？

感謝。

來源

2016-05-16 Steve

只是這一行的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">

來源

2016-05-16 10:33:22 thepio

爲什麼downvote？巨魔天？兩個正確的答案，兩個downvotes ... –

我要upvote你。不知道爲什麼downvoted。 – thepio

太好了。我接受了這個答案，因爲我不能將標籤更改爲'

這是一個<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>

來源

2016-05-16 10:34:36

爲什麼downvote？今天是我猜的巨魔日 –

謝謝馬科斯。我正在使用Gravity Forms，所以我無法將''更改爲'

好的！沒問題，這是最簡單的CSS，另一個答案是更多的CSS，但相同的HTML，所以兩者都是正確的。祝你好運！ –

設置寬度爲100％，並且最大寬度到按鈕的寬度。

來源

2016-05-16 10:40:48

不能使CSS自動換行：分詞工作

回答

相關問題