概要

テキストが 1行で表示できる場合には中央揃え、2行以上になる場合は自動で左揃えとなるスタイルを実現するための HTML の構造と CSS のコードについてです。

ただ、これを実現するために、HTML のタグが 3重のネストになってしまいます。(Firefox 2 をサポートしない場合は、ネストは 2重。)

• 短いときは中央、長いときは左寄せになるテキストの demo

説明

全体では中央揃え(text-align:center)、内包される inline-block では左揃え (text-align:left) とします。

inline-block は text-alignが有効でありながら箱を形成するので、箱自体は中央揃え、箱の中は左揃えとなります。この箱の横幅は内容量によって伸縮するので、短いときは中央揃え、2行以上になる場合は横幅は限界まで伸びている状態なので、箱の中身全体が左寄せになるテキストが実現できます。

IE 7 以下のための CSS ハックを使用しないで済むように、もともと inline レベルの要素である span に対して、inline-block を適用します。(IE 7 以下では inline-block は hasLayout:true にするためのトリガーでしかないので、もともとが inline レベルの要素に inline-block を指定することで inline + hasLayout:true の状態にすることができます。詳しくは IE 6, IE 7 の inline-block 考察をご参照ください。)

Firefox 2 以下では inline-block をサポートしていないため、性質がよく似ている display:-moz-inline-box; で代用をします。-moz-inline-box は Mozilla 系エンジンの独自実装です。ただし、-moz-inline-box は特殊でテキストが自動では回りこみません。Firefox などの Mozilla 系 Web ブラウザでこの動作を確認いただくための-moz-inline-box の動作確認用 demo を用意しました。

これを解決するために、-moz-inline-box を指定した要素の子要素に最大の横幅 (max-width) と overflow:hidden; を指定します。これは Firefox 2 以下の Web ブラウザのためのコードです。

これらを組み合わせることで短いときは中央、長いときは左寄せになるテキストが実現できます。

例えば、次のような構造のソースコードを準備します。

<p class="sample">
<span class="sampleText">
<span>
任意のテキスト
</span>
</span>
</p>

このHTMLの断片に次のような CSS を適用します。

p.sample{
	width:400px;
	border:1px solid red;
	text-align:center;
}

p.sample span.sampleText{
	display:-moz-inline-box;
	display:inline-block;
	text-align:left;
}

/* Firefox 2 and older */
p.sample span.sampleText > span{
	display:block;
	max-width:400px;
	overflow:hidden;
}

p.sample に設定されている width:400px; は必須ではありません。また、Firefox 2 用のコードで、最大幅 (max-width:400px;) を任意で書き換えてください。

トラックバックURI

http://www.yomotsu.net/lab/css/center-left-text/trackback

実験室に戻る