0

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

多个这样的多层跨度应彼此相连，它们的底层和地窖对齐（想象你正在连接双层火车车厢）。如果太长而不适合一行，则每个多层跨度都应该是可包裹的。它应该看起来像这样（[]包含子跨度，大的多层跨度除以|）：

[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]

这是我最接近的解决方案（请参阅 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 示例中情况并非如此。很长的跨度不是在换行之前填充第一行，而是从第二行开始，这是不应该的。

任何建议如何达到预期的结果？

4

0 回答 0