左と右の余白の両方に沿って線の境界線を完全に整列する方法

Question

次のコードではChromeとEdgeで完全に機能する擬似要素を使用していますが、Firefoxでは完全にはマージしません右側に沿って。魔法のトリックがなければ、すべてのブラウザは左マージンに沿ってラインを整列させますが、右に沿って整列させようとはしません。私はすでに、テキスト整列を使用しています

： https://jsfiddle.net/h0qwbwve/10/：

HTML

<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> 

CSS（ノー擬似要素）

.lb{ 
     text-align: justify; 
     display: block; 
     width: 390px; 
    } 

を正当化するこれは、左余白に沿って整列ラインを出力します

次のpsuを追加する江戸要素：

.lb:after { 
content: " ___________________________________________________________________________________________________________________________________________________________"; 
line-height: 0; 
visibility:hidden; 
} 

私はChromeとEDGEの左右の余白に沿って最適なアラインメントを得る：https://jsfiddle.net/h0qwbwve/11/を - しかし、それは少しFirefox用右マージンでオフになっています。

私はこの擬似要素が実際に何をしているのか理解したいと思っています。特に、FirefoxやSafariで「正しい」ことをしたり、その動作がChromeとEDGEで同じままになる可能性があるためです。

Answer 1

サポートが必要なブラウザによっては、魔法を使う必要はありません。このための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"> 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>