Perfect, full, compatible, and compatible with justify

Perfect, full, compatible, and compatible with justify

Text-align: justify; supported by all browsers. text-justify and others only support IE.

Justify, in my understanding, alignment the two sides of the child element inside the element. The child element can only be inline or inline-block. However, justify is powerless for the last line. When alignment is performed, because only one row is used as the last row, there is no alignment between the two ends.

Name alignment we usually use & ensp; (half Chinese space), & emsp; (one Chinese space) to add a name with two or three characters, align the names that contain four words. For example:

 

Ouyang Daka

Zhang & ensp; Small & ensp; 3

Wang & emsp; 5

 

However, we found that most browsers are normal, but unfortunately we found that most of the mobile browsers cannot be opened, and the effect is not consistent as below.

 

Ouyang Daka

Zhang xiaosan

Wang Wu

 

So I thought of using text-align: justify; but how can we solve the problem that a single row cannot be aligned at both ends? The idea is:

　　Let the browser think this is not the last line.

Add a newline child element to the element, for example:

<i style="display:inline-block;width:100%;height:0;"></i>

 

Example: html Structure

<Ul class = "arter"> <li> <span> file name <I> </span>: baby </li> <span> file type <I> </span>: oil painting </li> <span> artist <I> </span>: zhang yuyu </li> <span> style <I> </span>: surreality </li> <span> Material <I> </span>: canvas oil painting </li> <span> subject <I> </span>: character </li> <span> creation time <I> </span>: 2011 </li> <span> location <I> </span>: east China </li> <span> size <I> </span>: 78x78 cm </li> </ul>

Scss

　　　　　　　　　li{font-size:14px;line-height:24px;color:#4a4a4a;                    span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;                         i{display:inline-block;width:100%;height:0;}                    }                }

Effect

Notes:

1) The span must be set to inline-block, so that it can be displayed with the following words, and the width setting will make the <I> line feed;

2) You must set the height of the span element and overflow: hidden; otherwise, <I> still occupies the height;

3) vertical-align: top; the height of the span in li is aligned with that in the back of the word; otherwise, it is changed