How to align both ends of paragraph text in html

Method: 1. Use the "text-align:justify" statement to align both ends of the text; 2. Use the justify-content attribute of flex layout to align both ends of the text, using the syntax "justify-content:space-around" |space-between”.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS achieves the effect of aligning both ends

Aligning both ends is conceptually not difficult to understand. If you don’t understand what alignment means, you can play around with office software such as Word.

Let’s talk about how to align both ends of the text. There are probably the following methods that I know of

text-align

text-align is used to set the horizontal alignment of text within block-level elements. If you want to center-align inline elements or inline-block elements, you can use the text-align: center method. Text-align cannot be used to achieve center alignment for block elements. If you want the block element to be centered, you can use the margin: auto method.

There is a justify value under the text-align attribute that can set the alignment of both ends of the element. However, the text-align: justify attribute has some shortcomings:

1. Under a single line of text, the alignment effect cannot be achieved at both ends.

2. Under multi-line text, the alignment effect of both ends of the last line of text cannot be achieved.

Single line text

<p class="keith">unclekeith wanna be a geek!</p>
.keith {
    background-color: lightblue;
    
}

For multi-line text, as shown below, according to our understanding it should be displayed as shown on the right, but when setting text-align : After justify, it will be displayed as shown on the left. It cannot be the alignment effect of the last line of text in Xi'an.

Solution

If you want to truly achieve the effect of aligning both ends, you can use the following method to solve it.

//解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。
.keith {
    text-align: justify;
}
.keith:after {
    display: inline-block;
    width: 100%;
    content: '';
}

If you feel that there are too many empty lines at the end, you can set a height for the element and set overflow: hidden to hide it.

justify-content

Under the new flex layout of CSS3, there is a justify-content attribute, which can control the horizontal alignment of scalable items. There are two values, which can achieve alignment on both ends. However, justify-content has compatibility issues and is supported by IE10 and above, FF, and Chrome. And all browsers support the text-align attribute

justify-content: space-around; //伸缩项目会平均地分布在伸缩容器内，两端保留一半的空间。
justify-content: space-between; //伸缩项目会平均地分布在伸缩容器内，第一个伸缩项目在伸缩容器的左边缘，最后一个伸缩项目在伸缩容器的右边缘。

justify-content: space-around;

justify-content: space-between

Recommended learning: html video tutorial

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