ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSテキストアライグラストプロパティの導入

CSSテキストアライグラストプロパティの導入

Jennifer Aniston
リリース: 2025-02-21 10:00:17
オリジナル
582 人が閲覧しました

Introducing the CSS text-align-last Property

csstext-align-lastプロパティの詳細な説明:テキストの最後の行を完全に整列させた微妙な微妙な点は、多くの場合、ユーザーエクスペリエンスの成功または失敗を決定します。テキストシャドウや要素間隔などの詳細は、Webサイトの全体的なビューに影響を与える可能性があります。このために

属性が作成され、特に両端でテキストのアライメントを扱う場合、テキストブロックの最後の行または強制新しい行の前の行のアライメントを正確に制御できます。

この記事では、利用可能な値、ブラウザーサポート、特定のブラウザの動作を含むtext-align-last属性の詳細な側面について説明します。

text-align-last使用値と利用可能な値

使用属性は非常に単純です。次のコードスニペットは、最後のテキスト行を右に調整します:

text-align-lastプロパティには7つの値があります。最初の3つの値は、それぞれ左、右、および中央の最後のテキスト行を並べます。

.intro-graph {
  text-align: justify; /* IE 和 Edge 浏览器需要 */
  text-align-last: right;
}
ログイン後にコピー

値は、両端の最後のテキスト行を並べ、単語間隔を調整してコンテナスペースを埋めます。テキストの長さに応じて、このプロパティは、最後の行の大きなブランクを効果的に回避できます。 left rightcenter値は、テキストの方向に従ってテキストを行の先頭に並べます(左から右または右から左)。左から右への言語の場合、justifyに相当します。値は反対であり、テキストの方向に応じて行の最後に整列しています。 start endauto値はデフォルト値であり、

属性の値に応じて最後の行を並べます。

isjustifyの場合、

に相当します。 start leftright予防策end

仕様では、auto属性をtext-alignに設定する必要があることを規定しています。ただし、IEとEdgeブラウザーのみがこのルールに従います。このプロパティは、FirefoxとChromeブラウザが設定されていない場合でも、適切に機能します。 text-align justifyauto属性は、コンテンツの絶対的な最後の行のみではなく、指定された要素内のすべての段落の最後の行に影響します。絶対的な最後の行のみを整列する場合は、startまたは

セレクターを使用します。

段落に1つの行のみがある場合、属性が明示的な最初の行のアライメントを指定しない限り、

属性よりも優先されます(たとえば、

)。 text-align-last text-alignjustifyブラウザサポートtext-align: justify

text-align-lastプロパティは、実験的なWebプラットフォーム機能を有効にすることにより、ChromeおよびOperaブラウザー(バージョン35以降)でサポートされています。バージョン47および34から始めて、ChromeおよびOpera Browsersはこのプロパティを完全にサポートしています。 :last-child

firefoxブラウザには-moz-プレフィックスが必要です。 IEブラウザはstart値とend値をサポートしていませんが、Edgeブラウザはこのプロパティを完全にサポートしています。 Safariブラウザは、このプロパティをまったくサポートしていません。

概要

text-align-lastプロパティすべてのブラウザが完全にサポートしているわけではありませんが、その幅広いアプリケーションシナリオにより、Webサイトのテキストタイプセットを改善するための重要なツールになります。この属性を合理的に使用すると、Webサイトの全体的な美学とユーザーエクスペリエンスが大幅に向上する可能性があります。

csstext-align-lastプロパティに関するFAQ

(元のテキストのFAQパーツは、記事が長すぎて擬似オリジナルの目標と一致しないため、ここでは省略されています。PAQパーツのコンテンツは、必要に応じて補足または変更できます。)

以上がCSSテキストアライグラストプロパティの導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート