すべてのブラウザで Div 内のテキストの最後の行を両端揃えにするにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Susan Sarandon

Dec 10, 2024 am 02:21 AM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7872

Java チュートリアル

1649

CakePHP チュートリアル

1408

Laravel チュートリアル

1301

PHP チュートリアル

1245

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

それは＆＃039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

ブラウザから有効なCSSプロパティ値を取得できますか？ Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか？

レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

スティッキーヘッダーとフッターにCSSグリッドを使用する方法 Apr 02, 2025 pm 06:29 PM

CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか？ Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります（D ...

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック