HTML：换行两行，为新行上的每一行保留空间答案

【问题标题】：HTML: Wrap lines of two rows with space reserved for each row on the new lineHTML：换行两行，为新行上的每一行保留空间
【发布时间】：2016-09-26 05:20:05
【问题描述】：

我正在尝试使用 flexbox 或其他技术来创建一种文字处理器。

文字处理器中的行将由两行组成，并且会换行到新行，同时为新行上的两行保留空间。

    <span class="remark" style="display: inline">
      <span style="display: flex; flex-direction: column; flex-wrap: wrap">
        <div class="topic" style="font-size: 12px; border-width: 1px; border-style: solid; border-color: green">This is the secondary row.</div>
        <div class="text" style="font-size: 18px; border-width: 1px; border-style: solid; border-color: red;">This is the primary row. Ideally, once either row reaches the end of the container, the stack will wrap to the next line, reserving space for both rows, creating effectively two sets of rows of alternating Christmas colors instead of one line of green and three lines of red, ho ho ho!</div>
      </span>
    </span>

https://jsfiddle.net/4j7yqrnm/

目标基本上是每当任一车道充满文本“汽车”时，将一条充满文本的双车道“道路”换成新行。

下面是我的意思的粗略图。我正在尝试制作两行的行，只要在其中任何一个中添加文本，它们就会扩展。这些行将换行并在新行上保持相同的顺序。

================================================ =========================== aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa====================================aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

进一步编辑：我正在尝试完全实现这个问题的要求，除了 html/css/js 而不是 TeX：https://tex.stackexchange.com/questions/136121/possible-to-wrap-multiple-rows-within-a-column-at-one-time

谢谢！

【问题讨论】：

请发布您已经尝试过的代码，并说明它是如何不工作的。
请查看小提琴的链接。问题是主行直接换行到新行，而不是为次行留出空间并将堆栈作为一个整体包裹。谢谢！
我不明白...您正在使用column flex direction 和wrap 在它上面...包装现在不会发生...
对，我的想法是将两行放在一列中，这样它们就会相邻，然后如果其中一行接近容器边缘，则一起换行。想象一下 HTML 文档中的一条双车道道路，当其中一条车道上满是汽车时，两条车道会合并成一条新线。
@gogamecocks 因此，如果其中一行中的文本以 3 行换行，则您希望另一行的高度为 3 行......等等......我想对了吗？

标签： html flexbox word-wrap

【解决方案1】：

我可以想出一个小技巧来做到这一点不使用任何特殊的东西，比如flexbox：

绝对定位text 和topic div。
调整line-height 并用margin 偏移其中一个以创建效果。

.remark{
  position: relative;
}
.text {
  font-size: 12px;
  color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 3em;
  margin-top: 1.5em
}
.topic {
  font-size: 12px;
  color: green;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 3em;
}

<body>
  <div class="remark">
    <div>
      <div class="topic">This is the primary row. Ideally, once this row reaches the end of the container, it will wrap to the next line, reserving space for the secondary row, creating effectively two sets of rows of alternating Christmas colors, ho ho ho!</div>
      <div class="text">This is the primary row. Ideally, once this row reaches the end of the container, it will wrap to the next line, reserving space for the secondary row, creating effectively two sets of rows of alternating Christmas colors, ho ho ho!</div>
    </div>
  </div>
</body>

对于不同的字体大小，请参见以下示例：

.remark{
  position: relative;
}
.text {
  font-size: 12px;
  color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 36px;
  margin-top: 18px;
}
.topic {
  font-size: 18px;
  color: green;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 36px;
}

<body>
  <div class="remark">
    <div>
      <div class="topic">This is the primary row. Ideally, once this row reaches the end of the container, it will wrap to the next line, reserving space for the secondary row, creating effectively two sets of rows of alternating Christmas colors, ho ho ho!</div>
      <div class="text">This is the primary row. Ideally, once this row reaches the end of the container, it will wrap to the next line, reserving space for the secondary row, creating effectively two sets of rows of alternating Christmas colors, ho ho ho!</div>
    </div>
  </div>
</body>

【讨论】：