word-spacing

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

구문

/* 키워드 값 */
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

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

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
Computed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
Animation typea length

형식 구문

normal | <length-percentage>

where
<length-percentage> = <length> | <percentage>

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'word-spacing' in that specification.
Working Draft Replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <percentage> value. Allows up to three values describing the optimum, minimum, and maximum value.
CSS Level 2 (Revision 1)
The definition of 'word-spacing' in that specification.
Recommendation No change.
CSS Level 1
The definition of 'word-spacing' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
word-spacingChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 3.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
<percentage> valuesChrome No support NoEdge No support NoFirefox Full support 45IE No support NoOpera No support NoSafari Full support 6.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 45Opera Android No support NoSafari iOS Full support 6.1Samsung Internet Android No support No
SVG supportChrome Full support 1Edge Full support 12Firefox Full support 72IE Full support 9Opera Full support 7Safari Full support 5.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 14Safari iOS Full support 5.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기