Как не растянуть естественную высоту текста элемента flexbox или сетки (используя цвет фона для текста)?

Question

Я хочу добиться того же текстового эффекта (маленькие поля под белыми полями, как показано в синем поле [1]) в зеленом поле [2]. Зеленый прямоугольник [2] должен использовать flexbox (или css-grid) для макета.

Мой вопрос: возможно ли это без изменения HTML-кода (например, путем добавления <span> -элемента)?

/* ======================= 
   General Styles (not relevant) */

section {
  min-height: 15em;
  font-family: sans-serif;
  line-height: 1.4;
  padding: 1em;
  margin-bottom: 1em;
}

h2 {
  display: inline;
  background: white;
  font-size: 1em;
  margin-bottom: 0.5em;
}


/* ======================= */


/* Layout [ 1 ]: Just a little padding on the left */

section#one {
  padding-left: 50%;
  background: darkblue;
}


/* Layout [ 2 ]: Using flexbox */

section#two {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  background: seagreen;
}

section#two h2 {
  flex-basis: 50%;
}

<section id='one'>
  <h2>[ 1 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

<section id='two'>
  <h2>[ 2 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

Answer 1

Как объяснено в предыдущем вопросе , гибкий элемент автоматически «блокируется», и искомый эффект применяется только к встроенному элементу.

Если вы хотите, чтобы между каждой линией было только вертикальное пространство, где нет фона, вы можете рассмотреть градиент. Самое сложное - найти правильные значения, чтобы покрыть область содержимого только цветом градиента.

/* ======================= 
   General Styles (not relevant) */

section {
  min-height: 15em;
  font-family: sans-serif;
  line-height: 1.4;
  padding: 1em;
  margin-bottom: 1em;
}

h2 {
  display: inline;
  font-size: 1em;
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,transparent 0.1em,
      white 0.1em,white 1.1em,
      transparent 1.1em,transparent 1.2em);
  margin-bottom: 0.5em;
}
#one h2 {
  background:#fff;
}

/* ======================= */


/* Layout [ 1 ]: Just a little padding on the left */

section#one {
  padding-left: 50%;
  background: darkblue;
}


/* Layout [ 2 ]: Using flexbox */

section#two {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  background: seagreen;
}

section#two h2 {
  flex-basis: 50%;
}

<section id='one'>
  <h2>[ 1 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

<section id='two'>
  <h2>[ 2 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

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

Почему между линейными блоками есть пробел, а не из-за полусведения?

Понимание спецификации CSS2.1, касающейся высоты в боксах встроенного уровня