CSSでボックス幅を文字列に合わせたい

質問

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

回答No.1

noname#39970 · ベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

お礼

ありがとうございます。div要素に指定してたのでできなかったんですね。

回答No.2

steel_gray

blogのテンプレートみたいなものでなければ、文字数をwidth指定する。
8文字だったら width:8em; とか。

テーブルのように内容物に合わせるには、
ボックスの配置をstatic以外のfloatやabsoluteにすると中身に沿うようにはなりますが、扱いが難しくなったりしますので#1さんのようにインライン要素に対してボーダーを描くのも手だと思います。

＞widthプロパティで文字列より小さいサイズに指定する
中身に従ってボックスが拡がるのはIEのバグなので、これを利用するのはよろしくないと思います。
他のブラウザでは指定幅から中身がはみ出し、枠線や隣のブロックに重なって表示されたりします。

お礼

SPAN要素に指定したらできました。ありがとうございました。
＞バグなんですか。。。知りませんでした。