Houn

記事内に広告を含む場合があります

詳しく見る
Web制作

公開日:2020.02.26

更新日:2023.07.21

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

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

下図「その他」のような形ですね。

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

更にこうなってしまうと、操作性も悪くなります。

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

このように、ひとつのラジオボタンを塊として改行させるのが理想ですね。

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

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

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

HTML

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

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

CSS

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

label {
  white-space: nowrap;
}

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

以上です。

【おすすめ取材記事】6ヶ月でWebデザイナーを目指すスクール

関東に7校舎展開するWebクリエイタースクール「デジLIG」の卒業生さん、スタッフさんを取材しました!

9万人以上のクリエイターを輩出してきた「デジタルハリウッドSTUDIO」と、デザインアワードを多数受賞しているWeb制作会社「LIG」の業務提携により誕生した、信頼と実績のあるスクールです。

未経験から6ヶ月で、プロのWebデザイナーを目指せる秘密を解説。
ぜひ、チェックしてみてください。

記事はこちらから