CSS3 テキストの位置揃え_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 テキストの位置揃え_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

ブラウザ参照ベースライン: Firefox4 以降、Chrome5 以降、Safari5 以降、Opera10.53 以降、IE5.5 以降

配置スキームは text-align:justify および text-align-last に基づいています。 justify

お元気ですか！

ほとんどのブラウザは単語間のスペースのサイズを調整することで位置合わせを実現するため、事前に各単語と漢字の間にスペースを挿入します

IE の実装

div{

text-align:justify ; Text-Align-Last：正当化が最初に実装されました。 align-last:justify;

}

text-align-last は Firefox12-17 ではまだ実験的なサポート段階にあり、接頭辞として -moz- を付ける必要があります

Chrome、Safari、Opera の実装

{{

高さ: 19px;

オーバーフロー:

高さ: 0;

}

Chrome23、Safari5.1.7、Opera12.11 は text-align-last をサポートしていませんが、text-align jsutify をサポートしているため、ここで 1 行のテキストの両端の位置合わせを回避できます。 align:justify は、ブロック内のテキストの最後の行を処理しません (ブロック内にテキストが 1 行しかなく、最初の行と最後の行の両方である場合も含みます)。強制的に中断された行は次の位置で揃えられます。両端にありますが、他の行は処理されるため、ここの単一行を複数行に変更するだけで済みます。その後、疑似オブジェクトを使用して新しい行を導出できるため、HTML コードを追加で処理して非表示にする必要はありません。派生した新しい行

包括的な実装

overflow:hidden;

height:19px;

text-align-last:justify;

div :after{

display:inline-block;

content:'';

width:100%

}

text-align のすべてが text-align-last をサポートしているわけではありません。擬似オブジェクトを使用して、非 IE および IE7 以降のブラウザ (IE7 以下) 用の追加コンテンツを生成できます。ブラウザは擬似オブジェクトをサポートしていません。text-align を使用してください。 -last 処理)、それを 2 行目に配置して非表示にします。このとき、テキストの 1 行目 (つまり、整列される 1 行のテキスト) は text-align:justify を使用して整列できるため、Firefox はそれを行います。 text-align:justify も使用されるため、-moz-text-align-last を使用する必要はありません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。