我有以下代码,它使用了一个在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的行为可能会保持不变。
宾果游戏,谢谢。 – naftalimich