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

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ć 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 blokami. To zamiast tego ustawia odstępy między wierszami w akapicie, odstępy między wierszami w 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) 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 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