Question

我试图将我非常复杂的问题缩小到下面的测试场景：我有两个层次的“两层跨度”。在“地面”，有一系列子跨度。在“地窖”中，有单个跨度（我称之为标签），需要与“地面”上的子跨度序列的第一个子跨度保持左对齐。

这种多层跨度的多个应该在它们的底层和地窖对齐的情况下相互跟随（想象你正在连接双层火车车厢）。每个多层跨度如果太长而无法放入一条线，则应该是可以包装的。它应该看起来像这样（[]包含子跨度，大的多层跨度除以|）：

[First] [span].  |  [This] [long] [span] [should] [start] [on] [the] [same]
[A label]        |  [This is a long label]


[line] [as] [the] [short] [preceding] [one] [if] [there] [is] [enough] [space.]



[Likewise,] [the] [following] [span] [should] [start] [on] [the] [same] [line]



[as] [this] [one] [if] [space] [allows.]  |  [Another] [span]  |
                                          |  [Another label]   |


[Yet] [another] [span]                                   |  [A] [final] [span]
[A label that's longer than the "ground level" content]  |  [A final label]

这是我最接近解决方案（see result on JS Bin）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>JS Bin</title>
    <style type="text/css">
      .wrapper {
        display:inline-block;
        line-height:2em;
        padding-right:1em;
      }
      .wrapper > span:not([class]) {
        display:inline-block;
        position:relative;
        margin-bottom:2em;
        border:1px solid green;
      }
      .displayedLabel {
        position:absolute;
        display:block;
        white-space:nowrap;
        color:red;
      }
      .line {
        max-width:600px;
      }
      .labelPlaceholder {
        display:block;
        opacity:.1;
        margin-top:-2em;
      }
    </style>
  </head>
  <body>
    <div class="line">
      <span class="wrapper">
        <span>First<span class="displayedLabel">A label</span></span>
        <span>span.</span>
        <span class="labelPlaceholder">A label</span>
      </span>
      <span class="wrapper">
        <span>This<span class="displayedLabel">This is a long label</span></span>
        <span>long</span>
        <span>span</span>
        <span>should</span>
        <span>start</span>
        <span>on</span>
        <span>the</span>
        <span>same</span>
        <span>line</span>
        <span>as</span>
        <span>the</span>
        <span>short</span>
        <span>preceding</span>
        <span>one</span>
        <span>if</span>
        <span>there</span>
        <span>is</span>
        <span>enough</span>
        <span>space.</span>
        <span>Likewise,</span>
        <span>the</span>
        <span>following</span>
        <span>span</span>
        <span>should</span>
        <span>start</span>
        <span>on</span>
        <span>the</span>
        <span>same</span>
        <span>line</span>
        <span>if</span>
        <span>space</span>
        <span>allows.</span>
        <span class="labelPlaceholder">This is a long label</span>
      </span>
      <span class="wrapper">
        <span>Another<span class="displayedLabel">Another label</span></span>
        <span>span</span>
        <span class="labelPlaceholder">Another label</span>
      </span>
      <span class="wrapper">
        <span>Yet<span class="displayedLabel">A label that's longer than the "ground level" content</span></span>
        <span>another</span>
        <span>span</span>
        <span class="labelPlaceholder">A label that's longer than the "ground level" content</span>
      </span>
      <span class="wrapper">
        <span>A<span class="displayedLabel">A final label</span></span>
        <span>final</span>
        <span>span</span>
        <span class="labelPlaceholder">A final label</span>
      </span>
    </div>
  </body>
</html>

剩下的问题是：在多层跨度之前总是存在换行，这种换行太长而无法放在一条线上。在我的例子中，太长的跨度是第二个。在ASCII示例中，第一个短跨度（称为“第一个跨度”）后面是同一行上的非常长的跨度。 HTML示例中不是这种情况。而不是在包装之前填充第一行，非常长的跨度从第二行开始，它不应该。

有关如何达到预期效果的任何建议吗？

“多层跨度”，像通常的文字一样包裹

0 个答案: