hyphens
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS hyphens
속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다. 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.
시도해보기
구문
/* 키워드 값 */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* 전역 값 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
hyphens
속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.
값
none
-
단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.
manual
-
단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 줄 바꿈 위치 제안에서 자세한 정보를 알아보세요.
auto
-
브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 줄 바꿈 위치 제안 을 보세요)한 경우에는 해당 위치를 사용합니다.
참고: 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 auto
값의 동작도 정확해집니다. HTML lang
특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.
줄 바꿈 위치 제안
아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.
- U+2010 (HYPHEN)
-
붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.
- U+00AD (SHY)
-
투명한 "소프트" 하이픈("soft" hyphen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는
­
를 사용해 입력하세요.
참고: HTML <wbr>
요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.
형식 정의
초기값 | manual |
---|---|
적용대상 | all elements |
상속 | yes |
계산 값 | as specified |
Animation type | discrete |
형식 구문
예제
붙임표 줄 바꿈 지정하기
다음 예제는 hyphens
속성에 사용할 수 있는 세 개 값을 시연합니다.
HTML
<dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme­ly long English word</dd>
<dt>
<code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
</dt>
<dd lang="en" class="manual">An extreme­ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme­ly long English word</dd>
</dl>
CSS
dd {
width: 55px;
border: 1px solid black;
}
dd.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
dd.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
dd.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
결과
명세
Specification |
---|
CSS Text Module Level 3 # hyphens-property |
브라우저 호환성
BCD tables only load in the browser
같이 보기
content
overflow-wrap
(이전 이름word-wrap
)word-break