Как поддерживать блоки
на одном горизонтальном уровне?

Question

Я хочу написать сайт, на котором можно будет читать стихи, слева они будут в оригинале, а справа - перевод. У меня есть код вида

<body>
  <div class="container">
    <div class="text" id="left-text">
      <p>
        some text on the left
      </p>
      <p>
        some text on the left
      </p>
      <p>
       some text on the left
      </p>
    </div>
    <div class="text" id="right-text">
      <p>
        some text on the right
      </p>
      <p>
        some text on the right
      </p>
      <p>
       some text on the right
      </p>
    </div>
  </div>
</body>

Однако текст в переводе может быть длиннее, чем в оригинале (как и наоборот), из-за чего теряется синхронность: текст слева не соответствует тексту справа. Как добиться того, чтобы параграфы <p> слева и справа всегда были на одном уровне? Насколько понимаю, использование в данном случае табличного подхода не соответствует спецификации html, поскольку стихи по своей сути не являются табличными данными.

Answer 1

Строго говоря использование <p> для каждой строки тоже не является семантически верным решением. Однако, допустим у вас так задумано.

Вам нужно запретить переносы строки в оригинальном тексте и в переводе. В таком случае каждая строка будет занимать одну строку:

p {
  white-space: nowrap;
}

Параллельно с этим вы можете, если строка вдруг окажется чрезмерно длинной, обрезать ее, завершив многоточием:

p {
  overflow: hidden;
  text-overflow: ellipsis;
}

Предыдущий код работает только с однострочным текстом. Если строки у вас длинные, это может быть неудобно. Вы можете выделить место на 2 строки и ограничить текст двумя строками:

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  max-height: 2.4em;
}

Обратите внимание на строку max-height: 2.4em;. В ней указывается ограничение высоты в 2 строки. Высота двух строк зависит от состояния свойства line-height и без javascript трудно узнать какое значение установлено в данном свойстве, используются браузерные умолчания или оно было изменено, невозможно. В своем коде я исхожу из того, что значение line-height: 1.2. Т.е. 2 * 1.2 = 2.4. Это не всегда так, поэтому вам нужно жестко переопределить line-height, иначе возможны эффекты, которых вы не ожидаете.

Answer 2

Вариант без изменения разметки:

.container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 1em;
  grid-auto-flow: column;
}

.text {
  display: contents;
}

#left-text {
  grid-column: 1;
}

#right-text {
  grid-column: 2;
}

p {
  grid-column: inherit;
  margin: 0;
}

<div class="container">
  <div class="text" id="left-text">
    <p>some text on the left</p>
    <p>some text on the left</p>
    <p>some text on the left</p>
  </div>
  <div class="text" id="right-text">
    <p>some text on the right</p>
    <p>some text on the right long long long long long long long long  long long long long long long long long</p>
    <p>some text on the right</p>
  </div>
</div>

БЛОГ НА HUSL

Как поддерживать блоки
на одном горизонтальном уровне?

Ответы (2 шт):

БЛОГ НА HUSL

Как поддерживать блоки на одном горизонтальном уровне?

Ответы (2 шт):

Как поддерживать блоки
на одном горизонтальном уровне?