ホームページ >ウェブフロントエンド >CSSチュートリアル >すべてのブラウザで Div 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?

すべてのブラウザで Div 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?

Susan Sarandonオリジナル: 2024-12-10 02:21:12399ブラウズ

How Can I Justify the Last Line of Text in a Div Across All Browsers?

Div の最後の行を揃える

の最後の行のデフォルトのテキスト配置です。テキストの残りの部分が両端揃えであっても、多くの場合、左揃えになります。これは、特に美的または読みやすさの理由で最後の行を両端揃えにする必要がある場合にイライラする可能性があります。

クロスブラウザソリューション

最後の行を両端揃えにするには

IE6 を含むさまざまなブラウザーで、次の CSS を使用できます。

p, h1 {
  text-align: justify;
  text-align-last: justify;
}

p:after, h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

このメソッドは、text-align-last: justify; を組み合わせます。プロパティ。これは IE でサポートされており、:after 疑似コンテンツメソッドのバリエーションとして使用されます。また、1 行のテキスト要素の後に追加された余分なスペースを削除する修正も含まれています。

One-Line Text Fix

If your

テキストが 1 行しか含まれていない場合は、次の CSS を使用して、前の解決策によって発生する可能性のある余分な空白行を防ぐことができます:

h1 {
  text-align: justify;
  text-align-last: justify;
  height: 1em;
  line-height: 1;
}

h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

追加リソース

Forより詳細な情報については、参照してください宛先:

http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

以上がすべてのブラウザで Div 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css if for Property default this http WordPress

声明：

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

前の記事：CSS3 で背景画像を正しくアニメーション化するには?次の記事：CSS3 で背景画像を正しくアニメーション化するには?

続きを見る