2011/04/05 チェックボックスとラベルの間で改行させないCSS例

昔書いた社内ブログ記事です。

---

＜一番上＞

外側のボックスの幅が決まっているとき、
英数字の連続文字が枠をつきやぶってしまうことがありますよね。

＜真ん中＞

下のCSSを追加してみたんですが、ブラウザによって改行したりしなかったり。

CSS

word-wrap: break-word;
word-break: break-all;

IE8　→　○
FF3　→　×
Chrome　→　○
Opera　→　×
Safari　→　○

＜一番下＞

最後は苦肉の策でした。

HTML

<div style="
 width:120px;
 border:1px solid #333;
 word-wrap: break-word;
 word-break:break-all;">
  <input type="checkbox" id="cb" name="cb" value="1" style="
   position:absolute;" />
  <label for="cb" style="
   padding:0 0 0 1.5em;">this_is_a_label_for_the_checkbox</label>
</div>

label を display: block; にして text-indent を設定してもいけますね。

他にも案あったら教えてください（人´ω´）♪