줄 간격 설정
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
'programing' 카테고리의 다른 글
imshow in matplotlib에 의해 표시된 영상 반전 (0) | 2023.08.14 |
---|---|
Android에서 기본 활동으로 데이터 다시 보내기 (0) | 2023.08.14 |
지연 후 Selector:withObject:를 수행하는 대신 블록: (0) | 2023.08.14 |
Javascript / jQuery를 통해 Android 전화기 탐지 (0) | 2023.08.14 |
TypeScript를 사용하는 Angular2의 http 데이터에서 RxJS 관찰 가능한 항목 연결 (0) | 2023.08.14 |