Example of aligning both ends of a single line of text using css

In our daily WEB front-end development, we often encounter situations where a single line of text is aligned at both ends. It not only needs to be aligned, but also compatible with all browsers. So how does CSS achieve alignment at both ends? Today I will give you a detailed introduction to the example of using CSS to align both ends of a single line of text!

p{
    text-align:justify;
    text-align-last:justify;
}

Everyone is familiar with the above two lines of code. For multi-line text, it can basically be compatible with all browsers and achieve alignment at both ends. In multi-line text, this style does not handle the last paragraph of text.

So for single-line Chinese text, we need to patch

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

We use the after selector to add content at the end of the single-line text, but this will cause p to be stretched open, so we also need to set the height. The complete code is as follows:

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

This method is compatible with all mainstream browsers, at least I have not encountered any that are not easy to use. For browsers that do not support the after selector, please use the selectivize script, refer to My other blog

文 字 间 要 有 空 格，不 然 不 管 用

Summary:

This article uses examples to introduce in detail the CSS implementation of single-line alignment at both ends of this article. Example, I believe that my friends have a better understanding of this, I hope it will be helpful to your work! ~

Related recommendations:

Share the image and text code for aligning both ends in CSS3

#Example of how to align both ends of paragraph text in CSS style

Detailed explanation of how to align both ends of paragraph text in CSS

The above is the detailed content of Example of aligning both ends of a single line of text using css. For more information, please follow other related articles on the PHP Chinese website!