Text-align: justify; uneven distribution, text-alignjustify

Text-align: justify; uneven distribution, text-alignjustify

For text-align, we generally use the center attribute value. Suddenly, we need to achieve this effect today:

That is, the words "Shanghai activity" are evenly distributed in the region where they are located.

1 <li class = "current"> 2 
The above is the HTML code
1 li.current h3 {2     width: 203px;3     margin: 0 24px;4     padding: 0 11px;5     font-size: 20px;6     line-height: 20px;7     text-align: justify;8 }
The first reaction is of course to do this. That's right, of course,!

 
 
Actually, the result is left-centered. Then, let's try the "after" pseudo class?
1 li.current h3:after {2     display: inline-block;3     content: '';4     overflow: hidden;5     width: 100%;6     height: 0;7     line-height: 0;8 }

Well, this time we finally achieved even distribution, which is perfect,! What is this big blank?
 
 
For example, if the height of the pseudo class after and the row height are both 0, why not the pseudo class?
Review elements.


 
 
It seems to be a problem with h3, so you can give it a fixed high value:
1 .section5 li.current h3 {2     width: 203px;3     margin: 0 24px;4     padding: 0 11px;5     font-size: 20px;6     line-height: 20px;7     text-align: justify;8  height: 20px;9 }

Perfect, end with flowers ~