Ustaw odstępy między wierszami

145

Jak mogę ustawić odstępy między wierszami za pomocą CSS, tak jak w MS Word?

css line Księżyc
źródło

Odpowiedzi:

236

Wypróbuj właściwość line-height .

Na przykład rozmiar czcionki 12 pikseli i odległość 4 pikseli od dolnej i górnej linii:

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

Albo z emjednostkami

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
Mario Cesar
źródło
10
Zauważyłem, że potrzebowałem również, display: block;aby te ustawienia były skuteczne wszędzie, nie tylko na górze i na dole akapitu.
PatrickT
2
Pamiętaj, że nie możesz ustawić wartości właściwości line-height poniżej „1” lub „100%”, jeśli ustawiasz ją na element <a>. Jeśli chcesz, możesz na przykład ustawić <p> między swoim tekstem a <a>.
raulchopi
2
nie działa z zakresem, ponieważ jak wspomniał @PatrickT, zakres nie jest wyświetlany: blok
walv
1
@walv, to nie powinno.Również jeśli potrzebujesz go użyć w span, lepiej jest użyć display: inline-block, zamiast display: block.
Mario Cesar,
1
@Userthatisnotauser, nie możesz, podobna rzecz stanie się z użytkownikami, którzy będą musieli używać apletu java lub aplikacji internetowej wymagającej gniazda ᴜᴅᴘ (z powodu utraty obsługi ɴᴘᴀᴘɪ i wszystkich przeglądarek wycofuje wsparcie w swoich niestandardowych wtyczkach ᴀᴘɪ) . Strona internetowa ᴊᴘʟ poświęcona misji Cassini nadal wymaga wtyczki quick time, aby oglądać ich wideo onlineꜱ. Nie wspominając o tylko ɴᴘᴀᴘɪ wtyczkach, które umożliwiają oglądanie stereoskopowego wideo na stereoskopowych wyświetlaczach w transmisji strumieniowej. W moim kraju dwóch głównych dostawców kanałów telewizyjnych nadal wymaga Silverlight i nie planuje aktualizacji.
user2284570
103

Możesz również użyć wartości bez jednostek, która jest liczbą wierszy: line-height: 2;ma podwójne odstępy, line-height: 1.5;półtora itd.

MikeTheLiar
źródło
Nie działa w Operze opartej na Presto. Potrzebuję obejścia ... proszę! : \
user2284570
Status użytkownika @: działa na moim komputerze. Czy próbowałeś innych odpowiedzi?
MikeTheLiar
Chodzi mi o to, że element CSS jest rozpoznawany, ale nie wpływa na wynik renderowania. Przetestowano 12,16 i 12,50. Druga odpowiedź jest w zasadzie taka sama: WSZYSCY MÓWIĄ, aby używać elementu wysokości linii!
user2284570
@user Ponieważ tak to robisz. Wyobrażam sobie, że to błąd przeglądarki lub brak wsparcia dla tej reguły CSS. Prawdopodobnie powinno zostać zadane jako osobne pytanie.
MikeTheLiar
Jasne, pytanie o obejście nie jest tutaj tematyczne ... tak, jak widziałem, wpływa to na inne marki przeglądarek: istnieje, gdy jest ustawione za pomocą DOM lub gdy jest obecny contenteditable = "true".
user2284570
12

Nie możesz ustawić odstępów między akapitami w CSS za pomocą wysokości wiersza, odstępów między <p>blokami. To zamiast tego ustawia odstępy między wierszami w akapicie, odstępy między wierszami w <p>bloku. Oznacza to, że wysokość linii jest interlinią typografa w obrębie akapitu jest kontrolowana przez wysokość linii.

Obecnie nie znam żadnej metody w CSS do tworzenia (na przykład) <p>odstępu 0,15em , czy to przy użyciu wariantów em lub rem na dowolnej właściwości czcionki. Podejrzewam, że można to zrobić z bardziej złożonymi pływakami lub przesunięciami. Szkoda, że ​​jest to konieczne w CSS.

Thomas Visel
źródło
7
Czy nie mógłbyś użyć do tego marginesów na <p>odstępy?
Flimm
4
W niektórych przypadkach margin-topi / lub margin-bottommoże skutecznie osiągnąć to, co jest tutaj pożądane.
user1147171
10

Jeśli chcesz skondensowane linie, możesz ustawić tę samą wartość dla font-sizeiline-height

W pliku CSS

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

W pliku 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>

-> Zagraj z tym fragmentem kodu na jsfiddle.net

Możesz również zwiększyć, line-heightaby uzyskać precyzyjną kontrolę odstępów między wierszami:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}
olibre
źródło
9

Wypróbuj tę właściwość

line-height:200%;

lub

line-height:17px;

użyj zwiększania i zmniejszania głośności

ANANTH.S
źródło
@AVD: Nie działa w Operze opartej na Presto. Potrzebuję obejścia ... proszę! : \
user2284570
4

Nie jestem pewien, czy to miałeś na myśli:

line-height: size;
Alan Haggai Alavi
źródło
4

Spróbuj line-heightnieruchomości; istnieje wiele sposobów przypisywania wysokości linii

Harsha MV
źródło
1

Tak, jak wszyscy mówią, line-heightjest to. Każda używana czcionka, znak o średniej wysokości (taki jak a lub ■, nie przechodzący przez górną ani dolną), powinien mieć tę samą wysokość i długość co line-height: 0.6do 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>
Rozwiń fragment

RubenVerg
źródło
0

lineSpacing jest używany w React Native (lub natywnych aplikacjach mobilnych).

W sieci możesz użyć letterSpacing(lub letter-spacing)

Eric Kim
źródło