CSSで文字の両端を揃えるにはどうすればいいですか？文字の両端を揃える方法

この記事の内容は、CSSで文字の両端揃えを実現する方法を紹介するというものです。テキストの両端を揃える方法。困っている友人は参考にしていただければ幸いです。

最近のプロジェクトでは、次のような要件がありました: (テキストの量に関係なく、タイトル部分を両端で揃える必要がある)

以下に示すように:

当時、私は代わりに ' ' を使用することについてあまり考えていませんでした。結局のところ、製品の学生は効果をすぐに確認したかったので、あえて使用しませんでした。無視すること！しかし、2ページ目に到達して愕然としました。

図に示すように:

' ' ではもう満足できないのは明らかなので、   に移動します。

いくつかのスペースの違いについて簡単に説明します:

  /*半角的不断行的空白格*/
  /*半角的空格*/
  /*全角的空格*/

ページ効果はありますが、後で繰り返しますが、確認したところ、この書き方は柔軟性に欠けていることがわかりました（ここでの内容は固定されていますが）、第二に、意味論が十分ではありません。したがって、当然のことながら、text-align で最も使用する可能性がある center 属性は、(両端に揃えられる) という別の属性もありますが、CSS の後には使用されません。ページが更新されます。実際、ここでの

text-align:justify は、テキストが 2 行を超える必要があり、最後の行が両端で揃えられない場合に限り、単独で使用できます。

したがって、空のタグ スパンを使用する必要があります。

html:

 <p>职务：<span></span></p>

css:

p{
  width:200px;
  text-align: justify;
}
p span{
  display:inline-block;
  width:100%;
}

ここでの最も完璧なアプローチは、空のタグの代わりに ::after 疑似要素を使用することです。

PS: 情報を確認したところ、text-align-last: justify; は最終行の両端揃えを実現できるようですが、互換性が低いようです（Safari はサポートしていません）。

#CANIUSE（https://caniuse.com/#search=text-align-last）

以上がCSSで文字の両端を揃えるにはどうすればいいですか？文字の両端を揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。