กำหนดระยะห่างบรรทัด

ฉันจะตั้งค่าระยะห่างบรรทัดด้วย CSS เช่นเดียวกับที่เราสามารถตั้งค่าใน MS Word ได้อย่างไร

ลองline-heightคุณสมบัติ

ตัวอย่างเช่นขนาดตัวอักษร 12px และความยาว 4px จากด้านล่างและบรรทัดบน:

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

หรือกับemหน่วย

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

นอกจากนี้คุณยังสามารถใช้ค่าหน่วยน้อยซึ่งเป็นจำนวนบรรทัด: line-height: 2;เป็นระยะห่างสองเท่าline-height: 1.5;คือหนึ่งและครึ่ง ฯลฯ

คุณไม่สามารถตั้งค่าระยะห่างระหว่างย่อหน้าใน CSS โดยใช้ความสูงของบรรทัดระยะห่างระหว่าง<p>บล็อก แทนที่จะตั้งค่าระยะห่างระหว่างบรรทัดในย่อหน้าช่องว่างระหว่างบรรทัดภายใน<p>บล็อก นั่นคือความสูงของบรรทัดเป็นบรรทัดระหว่างตัวพิมพ์ที่อยู่ด้านในของย่อหน้าซึ่งควบคุมโดยความสูงของบรรทัด

ปัจจุบันฉันไม่ทราบวิธีการใด ๆ ใน CSS ที่จะสร้าง (เช่น) การ<p>เว้นวรรค0.15em ไม่ว่าจะใช้ em หรือตัวแปร rem ในคุณสมบัติฟอนต์ใด ๆ ฉันสงสัยว่ามันสามารถทำได้ด้วยการลอยหรือออฟเซ็ตที่ซับซ้อนมากขึ้น น่าเสียดายที่จำเป็นสำหรับ CSS

หากคุณต้องการเส้นแบบย่อคุณสามารถตั้งค่าเดียวกันสำหรับ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 */
}

ลองใช้คุณสมบัตินี้

line-height:200%;

หรือ

line-height:17px;

ใช้การเพิ่มและลดระดับเสียง

ฉันไม่แน่ใจว่านี่คือสิ่งที่คุณหมายถึง:

line-height: size;

ลองline-heightทรัพย์สิน มีหลายวิธีในการกำหนดความสูงของเส้น

ใช่เป็นสิ่งที่ทุกคนพูดline-heightเป็นสิ่งที่ ตัวอักษรใด ๆ ที่คุณกำลังใช้ตัวอักษรกลางสูง (เช่นหรือ■ไม่ได้ไปผ่านบนหรือล่าง) ควรจะไปแบบเดียวกับที่ความสูงความยาวที่จะline-height: 0.60.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>

lineSpacing ใช้ใน React Native (หรือแอพมือถือดั้งเดิม)

สำหรับเว็บคุณสามารถใช้letterSpacing(หรือletter-spacing)