Setați spațierea liniilor (Programare, Css, Linie)

Lună a intrebat.

Cum pot seta spațierea liniilor cu CSS, așa cum o putem seta în MS Word?

9 răspunsuri
Mario Cesar

Încercați line-height proprietate.

De exemplu, 12px font-size și 4px distanță de liniile de jos și de sus:

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

Sau cu em unități

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

Comentarii

  • am constatat că aveam nevoie și de display: block; ca aceste setări să fie eficiente peste tot, nu doar în partea de sus și de jos a paragrafului. –  > Por PatrickT.
  • Nu uitați că nu puteți seta valoarea proprietății line-height sub „1” sau „100%” dacă o setați pentru un element <a>. Dacă doriți acest lucru, puteți seta un <p> între textul dvs. și <a>, de exemplu. –  > Por raulchopi.
  • nu funcționează cu span pentru că așa cum a menționat @PatrickT span nu este display:block –  > Por walv.
  • @walv, nu ar trebui să funcționeze. de asemenea, dacă trebuie să îl folosiți într-un span, este de preferat să folosiți display: inline-block, în loc de display: block. –  > Por Mario Cesar.
  • @Userthatisnotauser nu se poate nu un lucru similar se va întâmpla cu utilizatorii care vor trebui să folosească java applet sau aplicație web care necesită ᴜᴅᴘ socket (din cauza pierderii suportului ɴᴘᴘᴀᴘɪ și a faptului că toate browserele își retrag suportul în plug-in-ul lor personalizat ᴀᴘᴘɪ). Site-ul web ᴊᴘʟ dedicat misiunii Cassini necesită în continuare plugin-ul quick time pentru a putea viziona videoclipul lorꜱ online. Ca să nu mai vorbim de faptul că doar ɴᴘᴘᴀᴘɪ plugin permite vizionarea de videoclipuri stereoscopice prin afișaje stereoscopice în streaming. În țara mea, doi mari furnizori de canale tv încă necesită silverlight cu planuri de a nu face upgrade. –  > Por utilizator2284570.
Mike G

De asemenea, puteți utiliza o valoare fără unitate, care este numărul de linii: line-height: 2; este cu spațiere dublă, line-height: 1.5; este una și jumătate, etc.

Comentarii

  • Nu funcționează în Opera bazată pe Presto. Am nevoie de o soluție de rezolvare… vă rog! : –  > Por user2284570.
  • @user status: funcționează pe mașina mea. Ai încercat și celelalte răspunsuri? –  > Por Mike G.
  • Mă refer la elementul CSS este recunoscut, dar nu afectează rezultatul redării. Am testat 12.16 și 12.50. Celelalte răspunsuri sunt practic aceleași : TOATE spun să folosiți elementul line-height! –  > Por user2284570.
  • @user Pentru că așa se face. Îmi imaginez că este un bug de browser sau lipsa de suport pentru acea regulă css. Ar trebui probabil să fie pusă ca o întrebare separată. –  > Por Mike G.
  • Sigur, să ceri o soluție de rezolvare este în afara subiectului aici… apropo, am văzut că afectează alte mărci de browsere: există atunci când este setată setarea cu DOM sau când contenteditable=”true” este prezent. –  > Por user2284570.
Thomas Visel

Nu puteți seta spațierea inter-paragrafe în CSS folosind line-height, spațierea între <p> blocuri. Aceasta stabilește în schimb spațierea de linie intra-paragraf, spațiul dintre rânduri în cadrul unui bloc <p> bloc. Adică, line-height este distanța interlinie în cadrul paragrafului este controlată de line-height.

În prezent, nu cunosc nicio metodă în CSS care să producă (de exemplu) un spațiu între rânduri de 0,15 em.<p> spațiere, fie că se utilizează variantele em sau rem pe orice proprietate de font. Bănuiesc că se poate realiza cu flotoare sau decalaje mai complexe. Păcat că acest lucru este necesar în CSS.

Comentarii

  • Nu ați putea folosi marjele pentru asta pentru inter-<p> spațiere? –  > Por Flimm.
  • În unele cazuri, margin-top și/sau margin-bottom poate realiza în mod eficient ceea ce se dorește aici. –  > Por user1147171.
oHo

Dacă doriți linii condensate, puteți seta aceeași valoare pentru font-size și line-height

În fișierul CSS

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

În fișierul 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>

–> Jucați-vă cu acest fragment pe jsfiddle.net

De asemenea, puteți crește line-height pentru un control fin al spațierii liniilor:

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

ANANTH.S

Încercați această proprietate

line-height:200%;

sau

line-height:17px;

utilizați creșterea & micșorați volumul

Comentarii

  • @AVD : Nu funcționează în Opera bazat pe Presto. Am nevoie de o soluție de rezolvare… vă rog! : –  > Por utilizator2284570.
Alan Haggai Alavi

Nu sunt sigur dacă la asta te-ai referit:

line-height: size;

Harsha M V

Încercați line-height proprietate; există mai multe moduri de a atribui înălțimea liniei

RubenVerg

Da, așa cum spune toată lumea, line-height este chestia. orice font folosiți, un caracter de înălțime medie (cum ar fi a sau ■, care nu trece prin partea superioară sau inferioară) ar trebui să meargă cu aceeași lungime de înălțime la line-height: 0.6 la 0.65.

Eric Kim

lineSpacing este utilizat în React Native (sau în aplicațiile mobile native).

Pentru web puteți utiliza letterSpacing (sau letter-spacing)

Tags:,