Imposta l'interlinea

145

Come posso impostare l'interlinea con CSS, come possiamo impostarlo in MS Word?

css line

— Luna
fonte

236

Prova la proprietà line-height .

Ad esempio, 12px dimensione del carattere e 4px distanti dalla riga inferiore e superiore:

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

O con le emunità

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

— Mario Cesar
fonte

10

Ho scoperto che avevo anche bisogno display: block;che queste impostazioni fossero efficaci ovunque, non solo nella parte superiore e inferiore del paragrafo.

— Patrick,

2

Ricorda che non puoi impostare il valore della proprietà di altezza della linea su '1' o '100%' se lo stai impostando su un elemento <a>. Se lo desideri, puoi impostare un tra il tuo testo e il tuo <a>, ad esempio.

— raulchopi,

2

non funziona con span perché come indicato da @PatrickT span non viene visualizzato: blocco

— walv

1

@walv, non si suppone. Inoltre, se è necessario utilizzarlo in un intervallo, è preferibile utilizzare display: inline-block, anziché display: block.

— Mario Cesar,

1

@Userthatisnotauser non è possibile che accada una cosa simile agli utenti che dovranno utilizzare l'applet java o l'applicazione Web che richiede ᴜᴅᴘ socket (a causa della perdita del supporto and e tutti i browser stanno ritirando il supporto nel loro plug-in personalizzato ᴀᴘɪ) . Il site sito web dedicato alla missione Cassini richiede ancora il plug-in rapido per guardare il loro videoꜱ online. Per non parlare del solo ɴᴘᴀᴘɪ plugin che ti permette di guardare video stereoscopici attraverso schermi stereoscopici in streaming. Nel mio paese, due principali fornitori di canali televisivi richiedono ancora Silverlight con piani di non aggiornamento.

— user2284570,

103

Puoi anche usare un valore senza unità, che è il numero di righe: line-height: 2;è a doppia spaziatura, line-height: 1.5;è una e mezza, ecc.

— MikeTheLiar
fonte

Non funziona nell'Opera di Presto. Ho bisogno di una soluzione alternativa ... per favore! : \

— user2284570

Stato utente: funziona sulla mia macchina. Hai provato una delle altre risposte?

— MikeTheLiar,

Voglio dire che l'elemento CSS è riconosciuto, ma non influenza l'output di rendering. Testato 12.16 e 12.50. L'altra risposta è sostanzialmente la stessa: TUTTI DICONO di usare l'elemento line-height!

— user2284570

@utente Perché è così che lo fai. Immagino che sia un bug del browser o la mancanza di supporto per quella regola CSS. Probabilmente dovrebbe essere posto come una domanda separata.

— MikeTheLiar,

Certo, chiedere una soluzione alternativa è fuori tema qui ... dal modo in cui l'ho visto influire su altri marchi di browser: esiste quando è impostata l'impostazione con il DOM o quando contenteditable = "true" è presente.

— user2284570

12

Non è possibile impostare la spaziatura tra paragrafi in CSS usando l'altezza della linea, la spaziatura tra i blocchi. Questo invece imposta la spaziatura tra le linee all'interno del paragrafo, lo spazio tra le linee all'interno di un blocco. Cioè, l'altezza della linea è l'interlinea del tipografo che conduce all'interno del paragrafo è controllata dall'altezza della linea.

Al momento non conosco alcun metodo nei CSS per produrre (ad esempio) un'interfaccia di 0.15em , sia che utilizzi le varianti em che rem su qualsiasi proprietà del font. Sospetto che si possa fare con galleggianti o offset più complessi. Un vero peccato questo è necessario nei CSS.

— Thomas Visel
fonte

7

Non potresti usare i margini per quello per l'interlacciamento ?

— Flimm,

4

In alcuni casi, margin-tope / o margin-bottompuò realizzare efficacemente ciò che è desiderato qui.

— user1147171

10

Se si desidera linee condensate, è possibile impostare lo stesso valore per font-sizeeline-height

Nel tuo file CSS

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

Nel tuo file 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>

-> Gioca con questo frammento su jsfiddle.net

È inoltre possibile aumentare line-heightper il controllo della spaziatura delle linee sottili:

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

— olibre
fonte

9

Prova questa proprietà

line-height:200%;

o

line-height:17px;

usa l'aumento e diminuisci il volume

— ANANTH.S
fonte

@AVD: non funziona nell'opera di Presto. Ho bisogno di una soluzione alternativa ... per favore! : \

— user2284570

4

Non sono sicuro se questo è ciò che intendevi:

line-height: size;

— Alan Haggai Alavi
fonte

4

Prova line-heightproprietà; ci sono molti modi per assegnare l'altezza della linea

— Harsha MV
fonte

1

Sì, come dicono tutti, line-heightè la cosa. Qualsiasi tipo di carattere che stai utilizzando, un carattere di altezza media (come un o ■, che non attraversa la parte superiore o inferiore) dovrebbe avere la stessa altezza in corrispondenza line-height: 0.6di 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>

Espandi frammento

— RubenVerg
fonte

0

lineSpacing viene utilizzato in React Native (o app mobili native).

Per il web puoi usare letterSpacing(o letter-spacing)

— Eric Kim
fonte