Reprint --- CSS text alignment at both ends

Align the two ends: Set the two ends of the text content, adjust the horizontal spacing of the text, so that it is evenly distributed between the left and right margins. Alignment on both ends makes the text on both sides neatly edges. Each row of the selected content is aligned to both sides of the page. The distance between words is automatically allocated based on the number of characters in each row.

------------------------------------------------ Reprint original ---------------------------------------------------

During form creation, we often encounter alignment of the upper and lower fields, such as name, mobile phone number, and place of birth. In this case, we need to use the text-align and text-justify styles.

Text-align can be set to justify directly. The text-justify situation is complicated. Some people may be unfamiliar with it. The values of IE are as follows:

• Auto: allows the browser user agent to determine the two-end alignment rules used
• Inter-word: Align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph.
• Newspaper: Align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet
• Distribute: Processing spaces is similar to newspaper. It is applicable to East Asian documents. Especially Thailand
• Distribute-all-lines: the two ends are in the same way as distribute, and they do not contain the last line of the two section alignment. Applies to ideographic documents
• Inter-ideograph: provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words.

However, it was first implemented as a private Implementation of IE, such as text-overflow and overflow-x. It was implemented very late in FF, in other words, there was a strict compatibility problem. And FF, chrome needs to manually insert blank or soft line feed labels between Chinese characters to take effect, the resistance encountered in chrome is even greater.

I have been chatting with friends in the QQ Group over the past two days. Finally, I will give an ultimate solution:

.test1 {      text-align:justify;      text-justify:distribute-all-lines;/*ie6-8*/      text-align-last:justify;/* ie9*/      -moz-text-align-last:justify;/*ff*/      -webkit-text-align-last:justify;/*chrome 20+*/  }  @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/      .test1:after{          content:".";          display: inline-block;          width:100%;          overflow:hidden;          height:0;      }  }

<! Doctype html> 
 
Original article address:Css text alignment