Как установить пустую высоту пролета, равную высоте линии по умолчанию?

У меня есть набор элементов <span> (каждый из них вложен в соответствующий <div>). Они создают стек панелей, как на рисунке ниже.

enter image description here

Когда диапазон содержит некоторый текст, он имеет нормальную высоту. Но когда он пуст, высота равна 0px. Но мне нужно иметь нормальную высоту (чтобы она выглядела как на картинке).

Как добиться такого поведения? (Я попытался вставить пробел, но, возможно, там лучшее решение).

Ответы

Ответ 1

Вот простое и надежное решение:

span.item:empty:before {
  content: "\200b"; // unicode zero width space character
}

(Обновление 12/18/2015: вместо использования \00a0 неразрывного пространства используйте \200b, который также является неразрывным, но с нулевой шириной. См. мой другой ответ в fooobar.com/questions/274522/...)

Этот селектор CSS выбирает только пробелы, которые являются "пустыми", и вводит некоторый контент в это пустое пространство, а именно неразрывный символ пробела. Таким образом, независимо от того, какой размер шрифта и высота линии вы установили, все вокруг этого <span> будет падать в линию, точно так же, как если бы у вас был текст, присутствующий в этом <span>, который, вероятно, вы хотите.

http://plnkr.co/edit/eXHphA?p=preview

Результат выглядит следующим образом:

correct resulting layout

Я вижу две проблемы с использованием min-height:

  • он уязвим, если размер шрифта изменяется
  • исходный текст не находится в правильном месте.

Вот как выглядят встречные примеры, когда все идет не так:

  • Размер шрифта меняется, и теперь вам нужно вручную настроить мини-высоту. Вы не можете использовать тот же класс для поддержки разных частей вашего сайта, где размер шрифта отличается. Здесь размер шрифта в этом месте равен 30, но минимальная высота по-прежнему равна 20. Таким образом, пустые интервалы не такие высокие.: - (

http://plnkr.co/edit/zeEvca?p=preview

font-size is 30, but min-height is 20. oops.

  1. Ваш пустой диапазон имеет правильную высоту с минимальной высотой, но он не выравнивается правильно с текстом, окружающим диапазон. Исходная линия падает неправильно. Посмотрите на строку, которая гласит: "А?" ниже:

http://plnkr.co/edit/GGd7mz?p=preview

how baseline fails

Код для этого последнего примера:

<div class="group">
  Hello <span class="item">Text</span>
</div>
<div class="group">
  Huh? <span class="item"></span>
</div>
<div class="group">
  Yes! <span class="correct"></span>
</div>

CSS

.group {
  background-color: #f1f1f1;
  padding: 5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.item {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
  min-height: 20px;
}

.correct {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
}
.correct:empty:before {
  content: "\00a0";
}

Ответ 2

Вы можете установить отображение диапазона: встроенный блок; а затем добавьте минимальную высоту

Ответ 3

Возможно, это сработает -

span{
  min-height:16px;
}

Ответ 4

Из рисунка кажется, что вы уже установили display: block в элементах span. Если нет, добавьте это. В качестве альтернативы рассмотрите возможность использования div. Разница между двумя элементами заключается в том, что span является встроенным по умолчанию, div является блоком по умолчанию, поэтому почему бы не использовать последний?

Затем вам нужно установить min-height в значение, равное высоте элементов, имеющих контент. Обычно это определяется их высотой линии. Высота строки по умолчанию зависит от шрифта (и от браузера), поэтому для получения согласованных результатов задайте высоту строки явно, например.

* { line-height: 1.25; }
span { min-height: 1.25em; }