Hyphens
Hyphens
텍스트에서 단어를 하이픈으로 줄 바꿈(하이픈네이션)할지, 어떻게 할지를 정해주는 유틸리티예요. 자동 하이픈네이션부터 직접 지정까지 방식을 조절할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
hyphens-none |
hyphens: none; |
hyphens-manual |
hyphens: manual; |
hyphens-auto |
hyphens: auto; |
예시 (Examples)
하이픈네이션 막기 (Preventing hyphenation)
hyphens-none 유틸리티를 사용하면 줄 바꿈 제안 문자인 ­가 사용됐더라도 단어가 하이픈으로 잘리지 않게 막을 수 있어요.
<p class="hyphens-none">
... Kraftfahrzeug­haftpflichtversicherung is a ...
</p>
수동 하이픈네이션 (Manual hyphenation)
hyphens-manual 유틸리티를 사용하면 줄 바꿈 제안 문자인 ­가 사용된 위치에서만 글을 끊어 하이픈네이션을 적용해요.
<p class="hyphens-manual">
... Kraftfahrzeug­haftpflichtversicherung is a ...
</p>
이것이 브라우저의 기본 동작이에요.
자동 하이픈네이션 (Automatic hyphenation)
hyphens-auto 유틸리티를 사용하면 브라우저가 언어에 기반해 하이픈네이션 지점을 자동으로 선택하게 만들 수 있어요.
<p class="hyphens-auto" lang="de">
... Kraftfahrzeughaftpflichtversicherung is a ...
</p>
줄 바꿈 제안 문자인 ­는 자동 하이픈네이션 지점보다 우선해서 사용돼요.
반응형 디자인 (Responsive design)
hyphens 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<p class="hyphens-none md:hyphens-auto ...">
Lorem ipsum dolor sit amet...
</p>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.