如何更改弹性项目的文本选择顺序？

Question

上下文：我有一个文本的两个版本，一个是英文的，另一个是翻译的。我希望在两列中并排显示。但是，与每个翻译一样，有些段落比原文更小或更大，我希望它们对齐，即让段落的第一句在原文和翻译文本中对齐：

En Paragraph         Translated Paragraph

Large en paragraph   Shorter translation
with 3               with 2 lines
lines

Both are aligned     At the top of the
Like this.           paragraph

但是，由于 HTML 页面的构建方式，我将原文和翻译文本交织在交替的段落中：

.container {
 display:flex;
 flex-wrap:wrap;
}
.container > p {
  flex-basis:50%;
  flex-grow:1;
}

<div class="container">
    <p>Large en paragraph with 3 lines (English)</p>
    <p>Shorter translation with 2 lines (Translation)</p>
    <p>Both are aligned Like this. (English)</p>
    <p>At the top of the paragraph (Translation)</p>
</div>

所以我在容器中使用 flex box 并将段落设置为 flex-grow: 1; flex-basis: 50% 以强制两列。

但是，当我尝试将 select 文本从呈现的页面中复制出来时，光标 selects 两列（遵循结构）。我想要的是让用户能够 select 只是英文文本或翻译文本。

我怎么能这样做？

Answer 1

不要交替翻译，先放英文再放非英文。然后你可以依靠 CSS 网格而不是 flexbox 来创建你的布局：

.container {
  display:grid;
  width:300px;
  grid-auto-columns:1fr;
  grid-auto-flow:dense;
}

.container > * {
  grid-column:1;
}
.container > .tr {
  grid-column:2;
}

<div class="container">
  <p>Large en paragraph with 3 lines (English)</p>
  <p>Both are aligned Like this. (English)</p>
  <p class="tr">Shorter translation with 2 lines (Translation)</p>
  <p class="tr">At the top of the paragraph (Translation)</p>
</div>

Answer 2

首先尝试按列拆分文本，然后在每列中按段落拆分。垂直对齐可以通过 "min-height" 属性.

完成

body {
  display: flex;
}

div {
  flex-grow: 1;
  flex-basis: 50%
}

p {
  min-height: 80px;
}

<body>
  <div>
    <p>Large en paragraph with 3 lines jhgvs dfhbs idufb sudhbh bdsfuyvbs odufyo iuyb (English)</p>
    <p>Both are aligned Like this. (English)</p>
  </div>
  <div>
    <p>Shorter translation with 2 lines (Translation)</p>
    <p>At the top of the paragraph (Translation)</p>
  </div>
</body>

如何更改弹性项目的文本选择顺序？

How to change the text selection order of flex items?

html

css

textselection

flexbox