Установить межстрочный интервал

148

Как я могу установить межстрочный интервал с помощью CSS, как мы можем установить его в MS Word?

css line

— Луна
источник

242

Попробуйте свойство line-height .

Например, размер шрифта 12px и расстояние 4px от нижней и верхней строк:

line-height: 20px; /* 4px +12px + 4px */

Или с emединицами

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

— Марио Сезар
источник

10

Я обнаружил, что мне также необходимо, display: block;чтобы эти настройки были эффективны везде, а не только вверху и внизу абзаца.

— PatrickT

2

Помните, что вы не можете установить значение свойства line-height ниже «1» или «100%», если вы устанавливаете его для элемента <a>. Если вы этого хотите, вы можете, например, установить между вашим текстом и <a>.

— raulchopi

2

он не работает с диапазоном, потому что, как упоминалось в @PatrickT, диапазон не отображается: блок

— walv

1

@walv, это не должно быть. Также, если вам нужно использовать его в диапазоне, предпочтительнее использовать display: inline-block вместо display: block.

— Марио Сезар

1

@Userthatisnotauser, вы не можете, аналогичная вещь случится с пользователями, которым потребуется использовать java-апплет или веб-приложение, требующее сокета ᴜᴅᴘ (из-за потери поддержки, и все браузеры прекращают поддержку в своих настраиваемых плагинах ᴀᴘɪ) . Веб-сайту, посвященному миссии «Кассини», по-прежнему требуется плагин quick time для просмотра видео онлайн. Не говоря уже о том, что только плагины ɴᴘᴀᴘɪ позволяют смотреть стереоскопическое видео через стереоскопические дисплеи в потоковом режиме. В моей стране два основных поставщика телеканалов по-прежнему нуждаются в Silverlight и не планируют обновлять их.

— user2284570

105

Вы также можете использовать безразмерное значение, то есть количество строк: через line-height: 2;двойной интервал, line-height: 1.5;полторы и т. Д.

— Майк
источник

Это не работает в Opera на основе Presto. Мне нужен обходной путь ... пожалуйста! : \

— user2284570

Статус @user: работает на моей машине. Вы пробовали какие-либо другие ответы?

— MikeTheLiar

Я имею в виду, что элемент CSS распознается, но не влияет на результат рендеринга. Проверено 12.16 и 12.50. Другой ответ в основном тот же: ОНИ ВСЕ УКАЗЫВАЮТ использовать элемент line-height!

— user2284570

@user Потому что вы это делаете именно так. Я бы предположил, что это ошибка браузера или отсутствие поддержки этого правила css. Наверное, стоит задать отдельный вопрос.

— MikeTheLiar

Конечно, здесь не по теме спрашивать обходной путь ... кстати, я видел, как это влияет на другие бренды браузеров: оно существует, если параметр установлен в DOM или когда присутствует contenteditable = "true".

— user2284570

12

Вы не можете установить интервал между абзацами в CSS, используя высоту строки, интервал между блоками. Вместо этого устанавливается межстрочный интервал внутри абзаца, расстояние между строками внутри блока. То есть, line-height - это межстрочный интерлиньяж шрифтовика в абзаце, управляемый высотой строки.

В настоящее время я не знаю ни одного метода в CSS для создания (например) интервала 0,15 мкм , независимо от того, используются ли варианты em или rem для любого свойства шрифта. Я подозреваю, что это можно сделать с более сложными поплавками или смещениями. Жаль, что это необходимо в CSS.

— Томас Визель
источник

8

Не могли бы вы использовать поля для интервала?

— Flimm

4

В некоторых случаях margin-topи / или margin-bottomможет эффективно выполнить желаемое здесь.

— user1147171 01

10

Если вам нужны сжатые строки, вы можете установить такое же значение для font-sizeиline-height

В вашем файле CSS

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

В вашем HTML файле

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Поиграйте с этим фрагментом на jsfiddle.net

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

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

— олибре
источник

9

Попробуйте эту недвижимость

line-height:200%;

или

line-height:17px;

используйте увеличение и уменьшение громкости

— ANANTH.S
источник

@AVD: Это не работает в Opera на базе Presto. Мне нужен обходной путь ... пожалуйста! : \

— user2284570

4

Я не уверен, что вы имели в виду:

line-height: size;

— Алан Хаггай Алави
источник

4

Попробуйте line-heightнедвижимость; есть много способов назначить высоту строки

— Харша М.В.
источник

1

Ага, как все говорят, line-heightвот в чем дело. Для любого шрифта, который вы используете, символ средней высоты (например, или ■, не проходящий через верхний или нижний) должен иметь одинаковую высоту и длину в line-height: 0.6to 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

Развернуть фрагмент

— РубенВерг
источник

0

lineSpacing используется в React Native (или собственных мобильных приложениях).

Для Интернета вы можете использовать letterSpacing(или letter-spacing)

— Эрик Ким
источник