CSS implements a single line of text justification for an example

In our daily web front-end development, will often encounter single-line text implementation of the two-way alignment, not only to align, but also compatible with all browsers, then how to achieve two-pronged CSS? Today, we will introduce you to the following CSS implementation of single-line text justification of the example!

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

The above two lines of code are very familiar to everyone, for multi-line text, the basic can be compatible with all the browser, to achieve the justification. In multiline text, the style is not processed for 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 used the after selector to add content at the end of a single line of text, but this would cause p to be stretched, 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 approach is compatible with all major viewers, at least I'm not having a bad time. For a browser that does not support the after selector, use the selectivize script, referring to one of my other blogs

<style>p{    text-align:justify;    text-align-last:justify;    height:24px;    font-size:20px;    width:500px;} p:after{    Display:inline-block;    Content: ";    Overflow:hidden;    width:100%;    height:0;} </style><p> text should have a space, or no use </P>

Summarize:

This article uses the example in detail for you to introduce the CSS implementation of the text at both ends of the example, I believe that the small partners have a further understanding of this, I hope that your work has helped! ~

Related recommendations:

CSS3 to achieve two-aligned graphical code sharing in the

Example of how CSS styles implement paragraph text justification

How CSS implements justification for both ends