如何完美對齊沿着左右邊界線邊界

我有以下代碼，它使用了一個在Chrome和Edge中完美工作但在Firefox中無法正常工作的僞元素，Firefox完美地對齊了左側邊緣的線條，但並不完美沿着右邊。如果沒有魔術技巧，所有瀏覽器都會沿着左邊界對齊線條，但不會沿着右邊線條進行。如何完美對齊沿着左右邊界線邊界

我已經使用文本對齊：證明

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

此輸出沿左邊距對齊線： https://jsfiddle.net/h0qwbwve/10/

添加以下psu江戶元素：

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

我相處在Chrome和EDGE左，右頁邊距精確對準：https://jsfiddle.net/h0qwbwve/11/ - 但它是稍微偏離在Firefox的右邊緣。

我期待了解這個僞元素實際上在做什麼，特別是因爲我想構建/修改它，以便在Firefox和Safari上執行「正確」的事情，或者至少得到失敗的原因相信Chrome和EDGE的行爲可能會保持不變。

來源

2016-11-11 naftalimich

根據您需要支持哪些瀏覽器，不需要魔術技巧。這裏有一個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>

來源

2016-11-11 20:39:58

賓果遊戲，謝謝。 – naftalimich

如何完美對齊沿着左右邊界線邊界

回答

相關問題