CSS 中两个 div 容器的交替换行符

Question

如果我在 div-容器中有一些文本，我会根据容器的大小自动换行。我想为两个 div-容器设置自动换行符，但顺序交替。在图片上你可以看到我想根据 html 代码得到什么。我不关注交替的颜色。我将背景标记为彩色，以便更好地理解我正在寻找的内容。

因为我想要很长且不同的内容，所以我不想用很多容器手工完成。另一个问题是当我这样做时缺乏灵活性。我希望它与灵活的周围容器尺寸一起使用。

有没有办法用 CSS 或任何其他方式实现它？

<div id="surrounding_container">
  <div id="box1">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi doloum ..  
  </div>
  <div id="box2">
    3.1415926535 8979323846 2643383279 5028841971 69399375105820974944 5923078164 0628620899 …     
  </div>
</div>

我正在尝试更详细地解释问题。

Answer 1

这里可能有大量的边缘案例需要测试，但这里有一种方法。使用 2  标签，行高约为正常值的 2 倍。绝对定位第二个 ，使其位于第一个  行之间的 space 内。随着每行  换行，它们将彼此偏移。

一个明显的边缘情况是当 2 个  标签的文本完全不同时 - 较长的  将有很多额外的 wide-spaced 行文本。因此，这仅在 2 个  元素具有相似文本长度时才有效。

html {
  font-size: 16px;
}

div {
  position: relative;
}

p {
  font-size: 1rem;
  line-height: 3rem;
  padding: 0;
  margin: 0;
  color: red;
}

p:nth-child(2) {
  position: absolute;
  top: 1.5rem;
  color: blue;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 2

这不是一个完整的解决方案，老实说，您的要求让我陷入沉思，但我相信 dd-Tag 和 wbr-tag 可能非常适合这项任务。尽管它并不总是有效，但是...

<div>
            <dd>depending on the line above. <wbr>Something like a translation to this line.</dd>
            <dd>abhängig von der Zeile darüber. <wbr>So etwas wie eine Übersetzung zu dieser Zeile<dd>
</div>

...combined/experimented 借助 Brett DeWoody 的解决方案和 CSS 技能，它应该可以为您完成工作。也许使用无序列表也可能对您有用：

<ul>
  <li class="tranlsationEng">depending on the line above. <wbr>Something like a translation to this line.</li>
  <li class="translationGer">abhängig von der Zeile darüber. <wbr>So etwas wie eine Übersetzung zu dieser Zeile</li>
</ul>

CSS 中两个 div 容器的交替换行符

Alternating line-break for two div-containers in CSS

html

css

line-breaks

我正在尝试更详细地解释问题。