Как изменить порядок выбора текста из flex-элементов? - PullRequest
Новая
       27

Как изменить порядок выбора текста из flex-элементов?

3 голосов
/ 14 апреля 2020

Контекст: у меня есть две версии одного текста, одна на английском языке sh, а другая - перевод. Это мой wi sh, чтобы отображать оба бок о бок в двух столбцах. Однако, как и при любом переводе, некоторые абзацы меньше или больше исходного текста, и я хочу, чтобы они были выровнены, то есть чтобы первое предложение абзаца было выровнено как в исходном тексте, так и в тексте перевода: 

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%, чтобы принудительно задать два столбца.

Однако, когда я попробуйте выделить текст, чтобы скопировать его с отображаемой страницы, курсор выберет два столбца (следуя структуре). Я хочу, чтобы пользователь мог выбрать либо текст Engli sh, либо переведенный текст.

Как я мог это сделать?

Ответы [ 2 ]

3 голосов
/ 14 апреля 2020

Не чередуйте перевод, поместите все английские sh, затем все не английские sh. Затем вы можете положиться на сетку 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>
0 голосов
/ 14 апреля 2020

Попробуйте сначала разбить текст по столбцам и по абзацам внутри каждого столбца. Выравнивание по вертикали можно выполнить с помощью свойства 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>
...