根据您需要支持的浏览器,不需要魔术。这有一个CSS属性,
text-align-last
这将按您希望的方式对齐块的最后一行。
.lb{
width: 390px;
text-align: justify;
display: block;
text-align-last:justify; /* added */
-moz-text-align-last:justify;
}
<span class="lb"> fkdjfkdsjfds fjkdsjfksd. fjkdkkkkkkkkkkkkkk</span>
<span class="lb">dgggggggggggg dddddddddddddddddddd kkkkklllll</span>
<span class="lb">kkkkkkkkkkkk dddddddddddddddd ttttttttt: dddd </span>
<span class="lb"> lllllllllll dddddddddddddddddd ffffffffffffff</span>
当然,以上仅适用于最新的浏览器。有时候你确实需要一个魔术。我的教育方式是这样的。
.lb {
width: 390px;
text-align: justify;
display: block;
}
.lb:after {
content: '';
display: inline-block;
width: 390px; /* note: same width as lb above */
height: 0;
}
<<span class=“lb”>DGGGGGGGGGG DDDDDDDDddddddddDDDDDDKKK LLL</span>
<span class=“lb”>KKKKK KKK DDDDDDDDDD TTTTTTT:dddd</span>
<span class=“lb”>LLLLLLLLDDDDDDDDddDDDDDDFFFFFFFFFF</span>