如何完美对齐沿着左右边界线边界

我有以下代码，它使用了一个在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

如何完美对齐沿着左右边界线边界

回答

相关问题