【初心者でもわかる】inputのボタンに改行は入らいないから代案を考える

inputのボタンには改行を入れることができないのでほかの方法を考えます。

inputのボタンの文章が長いので改行しよう↓

×「普通に改行を入れる」

index.html

<input type="button" value="この後で
改行させるよ" />

失敗

×「brタグを入れる」

index.html

<input type="button" value="この後で<br>改行させるよ" />

失敗

×「brタグを実体参照で書く」

index.html

<input type="button" value="この後で&lt;br&gt;改行させるよ" />

失敗

◎「inputタグを使わずにbutton要素を使う」

index.html

<button>この後で<br>改行させるよ</button>

成功！

まとめ

この結果からわかるように、inputタグのままボタンのテキストを改行させることはできません。

しかし、改行ではなく文字送りさせることで2列にすることは可能です。

index.html

<input type="button" value="この後で改行させるよ" />

style.css

input {
  width: 100px; /* 文字送りされるように幅を決める */
  white-space: normal; /* 文字がはみ出た時のルールを文字送りに指定 */
}

結果

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ