word-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS word-spacing 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.

시도해보기

구문

css
/* 키워드 값 */
word-spacing: normal;

/* <length> 값 */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> 값 */
word-spacing: 50%;
word-spacing: 200%;

/* 전역 값 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

normal

현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.

<length>

지정한 길이를 기본 단어 간격에 더합니다.

<percentage>

영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.

예제

HTML

html
<div id="mozdiv1">다양한 단어...</div>
<div id="mozdiv2">...더 많은 단어</div>

CSS

css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

접근성 고려사항

큰 절댓값의 word-spacing을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.

글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 word-spacing 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.

형식 정의

초기값normal
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Percentagesrefer to the width of the affected glyph
계산 값absolute <length>
Animation typea length

형식 구문

word-spacing = 
normal |
<length>

명세

Specification
CSS Text Module Level 3
# word-spacing-property
Scalable Vector Graphics (SVG) 2
# WordSpacingProperty

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
word-spacing
normal
<percentage> values
DeprecatedNon-standard
On SVG elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

같이 보기