Example code for justified text-align:justify in CSS

Use CSS text-align:justify; (function is line element justification) property to implement the CSS to achieve both ends of the alignment. Click here to see demo:css for justified alignment

The front-end research tests are as follows:

1, CSS justified--single-line display is perfect

2, CSS at the end of the alignment-the number of rows under the same node is also very perfect

3, CSS at the end of the alignment-multiple lines of the number of nodes under the different words a little sad reminder

Welcome to test their compatibility, and welcome to the third case, the way to align the last line to the left

Click here to see demo:css for justified alignment

The CSS implements the alignment style file as follows:

<style>ul{padding-left:0;list-style:none;margin:12px 0 24px 0;/* Reset */width:500px;padding:0 10px;border:1px solid #ccc;/* decorative */font-size:0;text-align:justify;text-justify:distribute-all-lines; /* for IE */}ul:after{content: ""; height:0;width:100%;d Isplay:inline-block;overflow:hidden;} UL li{width:90px;height:120px; margin:10px 0;background: #009800;d isplay:inline-block;vertical-align:top;*display: Inline;*zoom:1;} UL li a{color: #fff;} </style>

The CSS implements two-pronged HTML files as follows:

<strong>1, single-line display is perfect </strong><ul><li>ATUED</li><li> station effects </li><li> </LI><LI></LI><LI></LI></UL><STRONG>2, multi-line situation the same number of nodes is perfect </strong ><ul><li></li><li></li><li></li><li></li><li> </li><li></li><li></li><li></li><li></li><li></ LI></UL><STRONG>3, multi-line situation the number of nodes is different, a bit sad </strong><ul><li> lazy people build station </li><li ></li><li></li><li></li><li></li><li></li><li> </li><li></li></ul><p> Welcome to test its compatibility, and welcome to the third case, the way to align the last line to the left, </p>

Finishing tests on the front end

By the way, we can use this CSS to justify the DIV+CSS simulation table