programing

줄 간격 설정

closeapi 2023. 8. 14. 22:53
반응형

줄 간격 설정

MS Word에서 설정할 수 있는 것처럼 CSS로 줄 간격을 설정하려면 어떻게 해야 합니까?

높이 속성을 사용해 보십시오.

예를 들어, 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;는 1.5 등입니다.

CSS에서 행 높이, 사이의 간격을 사용하여 문단 간 간격을 설정할 수 없습니다.<p>블록들대신 단락 내 줄 간격, 즉 줄 사이의 공간을 설정합니다.<p>블록. 즉, 선 높이는 문단 내에서 선두에 있는 타자기의 선간선을 선 높이로 제어합니다.

나는 현재 CSS에서 0.15em 인터-를 생성하는 방법(예를 들어)을 알지 못합니다.<p>글꼴 속성에서 em 또는 rem 변형을 사용하는지 여부에 관계없이 간격을 지정합니다.저는 그것이 더 복잡한 플로트나 오프셋으로 이루어질 수 있다고 생각합니다.안타깝게도 이것은 CSS에서 필요합니다.

이 속성을 사용해 보십시오.

line-height:200%;

또는

line-height:17px;

볼륨 증가 및 감소 사용

축약된 선을 원하는 경우 동일한 값을 설정할 수 있습니다.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: size;

해라line-height속성; 선 높이를 할당하는 방법은 여러 가지가 있습니다.

네, 다들 그러시겠지만,line-height그게 문제야.중간 높이 문자(예: a 또는 ■)를 사용하는 글꼴은 다음에서 동일한 높이 길이를 사용해야 합니다.line-height: 0.6로.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>

lineSpacing은 React Native(또는 기본 모바일 앱)에서 사용됩니다.

사용할 수 있는 웹의 경우letterSpacing(또는)letter-spacing)

언급URL : https://stackoverflow.com/questions/3845433/set-line-spacing

반응형