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

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

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

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

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

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

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

HTML

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

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

CSS

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

label {
  white-space: nowrap;
}

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

挫折しないWeb制作学習ならデイトラがお勧めです

詳細は下記バナーをクリックして、公式サイトを覗いてみてください。