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

debugcn 发表于 Dev

安德烈·桑托斯（Andre Santos）

上下文：单个文本有两个版本，一个是英文版本，另一个是翻译版本。我希望在两列中同时显示两者。但是，与每个翻译一样，某些段落比原始文本要小或大，我希望它们对齐，即使段落的第一句在原始文本和翻译文本中保持对齐：

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%为强制两列。

但是，当我尝试选择文本以从呈现的页面复制文本时，光标将选择两列（紧随结构之后）。我想要的是用户能够仅选择英文文本或翻译的文本。

我该怎么办？

陪同Afif

不要替换翻译，把所有的英语都放在非英语的地方。然后，您可以依靠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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。