流体ボタンを作成するには

Question

フォームに使用している送信ボタンがあります。長いテキストは通常​​は問題ありませんが、小さな画面では問題が発生します。

現在、ページの幅に関係なく、ボタンは同じ幅のままであり、ページの幅が狭すぎると、ページが水平にスクロールします。

インラインブロック要素の内側にあるようにテキストを折り返してください。私はCSSでそれを指定しましたが、うまくいかないようです。

input{background:#deaded;padding:10px 30px;display:inline-block;border-radius:5px} 

<input type="submit" value="This is where the slogan goes" /> 

Answer 1

white-space: normal;を使用できます。

input { 
 
    background: #deaded; 
 
    padding: 10px 30px; 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    white-space: normal; 
 
}

<input type="submit" value="This is where the slogan goes" />