Houn

ラジオボタンやチェックボックス内テキストが改行されてしまうのを防止
2020.02.26

Web制作メモ

ラジオボタンやチェックボックスのテキストが回り込み改行されてしまう

ラジオボタンやチェックボックスのテキストは何も対策しないとサイト幅によって途中で改行され、ちょっと見栄えが悪くなってしまいます。

こんな感じ。「その他」の箇所

ラジオボタンのテキストが改行されてしまう1

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

ラジオボタンのテキストが改行されてしまう2

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

ラジオボタン内テキスト改行を解決

これはCSSたった1行指定するだけで解決できます。

ラジオボタン内テキストの途中改行をなくす

HTML

<label><input type="radio" value="人間関係について">人間関係について</label>

※前提として、ラジオボタン全体(inputタグとテキスト)をlabelタグで囲みます。ボタンだけでなくテキスト部分をクリックしてもチェックが入れられるようになり、ユーザーの使い勝手がよくなります。

CSS

そしてそのlabelタグに対して

label {
  white-space: nowrap;
}

折り返し禁止のwhite-space: nowrap;とやることでテキストの途中改行がされなくなり、各選択項目がサイト幅に合わせて見やすく配置されます。

Share on SNSシェア