如何沿左右边距完美对齐线条边界答案

【问题标题】：How to perfectly align line boundries along both the left and right margins如何沿左右边距完美对齐线条边界
【发布时间】：2017-03-25 23:33:15
【问题描述】：

我有以下代码使用伪元素，该元素在 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 中可能会保持不变。

【问题讨论】：

标签： css google-chrome firefox layout browser

【解决方案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>

【讨论】：