すべてのブラウザで 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ツール

ホットツール

ホットトピック

Java チュートリアル

1672

CakePHP チュートリアル

1428

Laravel チュートリアル

1332

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

静的フォームプロバイダーの比較 Apr 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

毎週のプラットフォームニュース：HTMLロード属性、主なARIA仕様、およびIFRAMEからShadowDOMへの移動 Apr 17, 2025 am 10:55 AM

今週のプラットフォームニュースのラウンドアップで、Chromeは、Web開発者のロード、アクセシビリティ仕様、およびBBCの動きのための新しい属性を導入します

HTMLダイアログ要素を使用したいくつかの実践 Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

ペーパーフォーム Apr 16, 2025 am 11:24 AM

購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが

「ポッドキャストにサブスクライブ」リンクはどこにすべきですか？ Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合：

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーター Apr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

独自の非JavaScriptベースの分析をホストするためのオプション Apr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

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版

ホットトピック