AAtomic CSS

hyphens

단어가 줄바꿈될 때 하이픈(-) 삽입 여부를 제어합니다. hya는 브라우저가 자동으로 하이픈을 추가하며, HTML의 lang 속성이 필요합니다.

클래스 목록

클래스CSS설명
hynhyphens: none하이픈 삽입 안 함, ­도 무시
hyahyphens: auto브라우저가 자동으로 하이픈 삽입 (lang 속성 필요)
hymhyphens: manual­ 위치에서만 하이픈 삽입 (기본값)

시각적 비교

좁은 컨테이너에서 긴 영단어가 어떻게 처리되는지 비교합니다.

None — hyn

Internationalization is a long word that demonstrates hyphenation behavior in narrow containers.

하이픈 없이 단어가 잘림

Auto — hya

Internationalization is a long word that demonstrates hyphenation behavior in narrow containers.

브라우저가 적절한 위치에 하이픈 추가

Manual (기본값) — hym

Internationalization is a long word that demonstrates hyphenation behavior in narrow containers.

­ 위치에서만 하이픈 삽입

클래스별 상세

hynhyphens: none

하이픈을 삽입하지 않습니다. ­ 소프트 하이픈도 무시됩니다.

<!-- 하이픈 없음 -->
<p class="hyn owbw w20rem">
  Internationalization에서 하이픈 없이 줄바꿈됩니다.
</p>

hyahyphens: auto

브라우저가 언어 사전을 참조하여 적절한 위치에 하이픈을 자동 삽입합니다. lang 속성이 반드시 설정되어 있어야 합니다.

<!-- 자동 하이픈 (lang 필수) -->
<p class="hya owbw w20rem" lang="en">
  Internationalization이라는 단어가
  적절한 위치에서 하이픈과 함께 줄바꿈됩니다.
</p>

<!-- HTML lang 속성 설정 -->
<html lang="en">
  <body>
    <p class="hya">자동 하이픈이 동작합니다</p>
  </body>
</html>

lang 속성 필수

hya는 HTML 요소에 lang="en" 같은 언어 속성이 없으면 동작하지 않습니다. 보통 <html lang="ko">에 설정합니다.

hymhyphens: manual

기본값입니다. &shy;(소프트 하이픈)이나 ‐(하드 하이픈)이 있는 위치에서만 하이픈을 삽입합니다.

<!-- 수동 하이픈: &shy; 위치에서만 -->
<p class="hym owbw w20rem">
  Inter&shy;natio&shy;nali&shy;zation은
  &shy; 위치에서만 하이픈이 삽입됩니다.
</p>

팁 & 주의사항

overflow-wrap와 함께 사용

owbw hya를 조합하면 단어가 잘릴 때 하이픈이 추가되어 가독성이 좋아집니다.

한국어에서는 효과 제한적

한국어는 음절 단위로 자연스럽게 줄바꿈되므로 hya의 효과가 크지 않습니다. 주로 영문, 독일어 등 긴 단어가 많은 언어에서 유용합니다.

word-breakoverflow-wrapwhite-space