Блог

Я заметил, что по мере того, как шрифты становятся все больше и больше, вертикальное заполнение в элементе div над и под текстом увеличивается. Есть ли быстрый способ предотвратить это? Зависит ли это от шрифта?

Я пытаюсь создать облако слов, но эти вертикальные интервалы оказываются довольно раздражающими.

Вот пример:

Вы можете использовать line-height правило стиля, чтобы изменить объем пространства вокруг текста

Установка высоты строки — это ваш ответ, но я бы рекомендовал использовать единицу измерения em и установить высоту строки равной 1em для всех размеров шрифта в вашем облаке тегов. Я всегда использую em для представления высоты строки, потому что независимо от того, задан ли шрифт пикселями, ems или какой-либо другой единицей измерения, высота строки всегда зависит от размера шрифта.

В соответствии со спецификацией W3C для высоты строки

Значение ‘normal’ устанавливает ‘line-height’ равным разумному значению для шрифта элемента. Рекомендуется, чтобы пользовательские интерфейсы устанавливали «нормальное» значение в виде числа в диапазоне от 1.0 до 1.2.

Это означает, что размер шрифта может меняться, но вертикальная высота шрифтов всегда будет оставаться неизменной относительно соответствующего размера.

Попробуйте в вашем css:

 line-height: 20px;
  

Вы могли бы исследовать некоторые уже созданные word clouds.

Или просто поместите классы в разные размеры, и таким образом вы можете добавить отрицательное заполнение к словам большего размера.

 .span bigger {
    font-size:2 em;
    padding: -4px;
}
.span big {
    font-size:1.5 em;
    padding: -2px;
}
.span small {
    font-size:0.9 em;
    padding: 0;
}
  

Надеюсь, это помогло или, по крайней мере, дало вам несколько классных идей! 😉