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

Question

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

由于我想拥有很长且不同的内容，我不想用很多容器手动完成。当我这样做时，另一个问题是不灵活。我希望它与灵活的周围容器尺寸一起使用。

有没有办法用 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 个<p> 标签，行高约为正常值的 2 倍。绝对定位第二个<p>，使其位于第一行<p> 之间的空间内。当每个<p> 换行时，它们将相互偏移。

一个明显的边缘情况是当 2 个<p> 标记的文本完全不同时 - 较长的<p> 将有许多额外的宽间距文本行。因此，这仅在 2 个 <p> 元素的文本长度相似时才有效。

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>

...结合/实验了 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>