How to align text on both ends with CSS? How to align text at both ends

The content of this article is to introduce how to achieve text alignment at both ends with CSS? How to align text at both ends. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A recent project encountered such a requirement: (requiring that the title part must be aligned at both ends regardless of the amount of text)

As shown below:

At that time, I didn’t think too much about using ' ' instead. After all, the product students wanted to see the effect quickly and didn’t dare to neglect! But I was stunned when I reached the second page.

As shown in the picture:

It is obvious that ' ' can no longer satisfy me, so I have to go to   .

Here is a brief explanation of the differences between several spaces:

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

The page effect is there, but it will be repeated later. When I checked, I found that this way of writing is not flexible (although the content here is fixed), and secondly, it is not semantic enough. So naturally I want to solve it through CSS. In text-align, the center attribute that we may use the most is the center attribute. There is also another attribute called justify (aligned at both ends), but it is not used after the page is refreshed. In fact, text-align:justify here can be used alone, provided that the text needs to be more than two lines, and the last line will not be aligned at both ends.

So we need to use an empty tag span.

html:

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

css:

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

The most perfect approach here is to use the ::after pseudo-element instead of the empty tag.

PS: After checking the information, I found that text-align-last: justify; can achieve the alignment of both ends of the last line, but it seems to have poor compatibility (Safari does not support it)

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

The above is the detailed content of How to align text on both ends with CSS? How to align text at both ends. For more information, please follow other related articles on the PHP Chinese website!