代码之家  ›  专栏  ›  技术社区  ›  naftalimich

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

  •  0
  • naftalimich  · 技术社区  · 8 年前

    我已经在使用文本对齐:对齐

    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/

    添加以下psuedo元素:

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

    我在Chrome和EDGE中沿着左右边距获得完美对齐: https://jsfiddle.net/h0qwbwve/11/

    我希望了解这个伪元素实际上在做什么,特别是因为我想构建/调整它,使它在Firefox和Safari上也能做“正确”的事情,否则至少有理由相信在Chrome和EDGE中的行为可能保持不变。

    1 回复  |  直到 8 年前
        1
  •  1
  •   Mr Lister hawi    8 年前

    根据您需要支持的浏览器,不需要魔术。这有一个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”>DGGGGGGGGGG DDDDDDDDddddddddDDDDDDKKK LLL</span>
    <span class=“lb”>KKKKK KKK DDDDDDDDDD TTTTTTT:dddd</span>
    <span class=“lb”>LLLLLLLLDDDDDDDDddDDDDDDFFFFFFFFFF</span>