
2020.02.26
Web制作メモ
ラジオボタンやチェックボックスのテキストが回り込み改行されてしまう
ラジオボタンやチェックボックスのテキストは何も対策しないとサイト幅によって途中で改行され、ちょっと見栄えが悪くなってしまいます。
こんな感じ。「その他」の箇所

更にこうなると最悪ですね。なんの●だよ?みたいな笑。

こうなって欲しいわけです。ひとつのラジオボタンを塊として改行させる。

これはCSSたった1行指定するだけで解決できます。
ラジオボタン内テキストの途中改行をなくす
HTML
<label><input type="radio" value="人間関係について">人間関係について</label>
※前提として、ラジオボタン全体(inputタグとテキスト)をlabelタグで囲みます。ボタンだけでなくテキスト部分をクリックしてもチェックが入れられるようになり、ユーザーの使い勝手がよくなります。
CSS
そしてそのlabelタグに対して
label {
white-space: nowrap;
}
折り返し禁止のwhite-space: nowrap;とやることでテキストの途中改行がされなくなり、各選択項目がサイト幅に合わせて見やすく配置されます。