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

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

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

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

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

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

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

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

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

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

label {
  white-space: nowrap;
}

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

以上です。

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか？

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare（スクエア）というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する（Squareを利用）」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。