css - 如何沿左右边距完美对齐线边界

Question

我有下面的代码，它使用了一个伪元素，它在 Chrome 和 Edge 中完美运行，但在 Firefox 中却不行，Firefox 完美地对齐了左边距的线条，但不是完美地对齐了右边距。如果没有这个魔术，所有浏览器都会沿着左边距对齐线条，但不会尝试沿着右边对齐。

我已经在使用 text-align: justify

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/

添加以下伪元素:

.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 可以按照您希望的方式对齐 block 的最后一行。

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