타이포그래피
hyphens
단어가 하이픈으로 나뉘는 방식을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
hyphens-none | hyphens: none; |
hyphens-manual | hyphens: manual; |
hyphens-auto | hyphens: auto; |
예제
하이픈 사용 방지
hyphens-none 유틸리티를 사용하면 줄바꿈 제안 ­이 사용되더라도 단어가 하이픈으로 분리되지 않도록 할 수 있습니다.
Duden 사전에서 공식적으로 인정된 독일어 최장 단어인 Kraftfahrzeughaftpflichtversicherung 은 36자로 이루어진 자동차 책임 보험을 의미합니다.
<p class="hyphens-none"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>수동 하이픈 넣기
hyphens-manual 유틸리티를 사용하면 줄바꿈 제안 ­이 사용된 위치에서만 하이픈을 설정할 수 있습니다.
독일어에서 가장 긴 단어로 Duden 사전에 공식적으로 등재된 Kraftfahrzeughaftpflichtversicherung 은 자동차 배상책임보험을 의미하는 36자 단어입니다.
<p class="hyphens-manual"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>이것은 브라우저의 기본 동작입니다.
자동 하이픈 넣기
브라우저가 언어에 따라 자동으로 하이픈 위치를 선택하도록 하려면 hyphens-auto 유틸리티를 사용하세요:
독일어에서 가장 긴 단어로 Duden 사전에 공식적으로 등재된 Kraftfahrzeughaftpflichtversicherung 은 자동차 책임 보험을 의미하는 36자 길이의 단어입니다.
<p class="hyphens-auto" lang="de"> ... Kraftfahrzeughaftpflichtversicherung is a ...</p>자동 하이픈 위치보다는 줄바꿈 제안 ­이 우선적으로 적용됩니다.
반응형 디자인
접두사 a hyphens 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="hyphens-none md:hyphens-auto ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
