使用CSS調整文本的最後一行

Question

我有一個CSS幫助程序類，用於強制最後一行「文本」（或用於預期用法，內聯塊div）成爲對齊對齊以及其餘的人。

下面是我得到了代碼：

.justify-all-lines 
{ 
    text-align: justify; 
    /* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */ 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

.justify-all-lines > *:last-child:after 
{ 
    display: inline-block; 
    width: 100%; 
    content: 'hello'; 
} 

.blocky 
{ 
    display: inline-block; 
    /* Make inline block work in IE 6/7 */ 
    zoom: 1; 
    *display: inline; 
} 

這是爲使用像這樣：

<div class="justify-all-lines"> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
    <div class="blocky">There is stuff in here.</div> 
</div> 

但是，我看到了「你好」顯示裏面的最後一個「塊狀」而不是在最後的「塊狀」div之後。我究竟做錯了什麼？

Answer 1

工作液：

.justify-all-lines 
{ 
    /* This element will need layout for the text-justify 
    * to take effect in IE7 (and possibly previous versions); 
    * this will force it, for more info Google "hasLayout in IE" 
    */ 
    overflow: hidden; 
    text-align: justify; 

    /* For IE6 to IE7 since they don't support :after */ 
    -ms-text-justify: distribute-all-lines; /* IE8+ */ 
    text-justify: distribute-all-lines; /* IE5+ */ 
} 

.justify-all-lines:after 
{ 
    /* 
    * We don't need IE6 and IE7 inline-block hack support here 
    * since they don't support :after anyways (the text-justify 
    * properties for them are above)... IE8 and above have native 
    * inline-block support so for IE8+, both the text-justify and 
    * :after will take effect but it doesn't have any negative 
    * effects since this element is invisible 
    */ 
    display: inline-block; 
    width: 100%; 
    content: '.'; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
}