Question

我试图使用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/

目标基本上是包装一条双线＆＃34;道路＆＃34;每当任何一条车道充满＆＃34;汽车＆＃34;文本。

下面是我的意思的粗略图片。我试图创建两行的行，只要在其中一个文本中添加文本，就会扩展。行将换行并在新行上保持相同的顺序。

=============================================== ========================== aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ================================= aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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

谢谢！

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

对于不同的字体大小，请参阅此示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

HTML：包裹两行的行，并为新行的每一行保留空格

1 个答案: