CSS hyphens 속성 완벽 정리 – 텍스트 줄바꿈 시 하이픈 처리 방법

CSS의 hyphens 속성은 텍스트가 여러 줄로 줄바꿈될 때 단어에 하이픈(-)을 어떻게 연결할지 지정하는 속성입니다. 긴 단어가 좁은 영역에서 잘리지 않고 자연스럽게 줄바꿈되도록 도와주며, 반응형 웹 디자인에서 특히 유용하게 활용됩니다.

hyphens 속성 기본 문법

hyphens: none | manual | auto | initial | inherit;

속성값 설명

none: 하이픈을 전혀 삽입하지 않습니다. 줄바꿈 시 단어가 통째로 다음 줄로 넘어갑니다.
manual: 마크업 내에 직접 입력된 하이픈( 또는 ‐)이 있는 위치에서만 줄바꿈이 발생합니다. 기본값입니다.
auto: 브라우저가 언어 규칙에 따라 적절한 위치에 자동으로 하이픈을 삽입합니다.
initial: 속성의 초기값(manual)으로 설정합니다.
inherit: 부모 요소의 hyphens 값을 상속받습니다.

예제 1: hyphens: manual

다음 예제는 hyphens: manual 값을 적용한 사례입니다. 브라우저 호환성을 위해 -webkit-, -ms- 접두사도 함께 작성했습니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 50px;
    border: 2px dashed red;
}
.demo {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}
</style>
</head>
<body>
<h1>데모 제목</h1>
<h2>hyphens: manual 속성값</h2>
<div class="demo">This is a demo text.</div>
</body>
</html>

실행 결과: 컨테이너 폭이 50px로 매우 좁기 때문에 단어 단위로 줄바꿈되며, 별도의 하이픈 문자가 없으면 하이픈 없이 그대로 넘어갑니다.

예제 2: hyphens: auto

이번에는 hyphens: auto 값을 적용해 보겠습니다. 이 경우 브라우저가 필요하다고 판단하면 자동으로 하이픈을 삽입합니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 50px;
    border: 2px dashed red;
    color: blue;
}
.demo {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
</style>
</head>
<body>
<h1>데모 제목</h1>
<h2>hyphens: auto 속성값</h2>
<div class="demo">This isssssss a demo text.</div>
</body>
</html>

실행 결과: 긴 단어가 좁은 영역 안에서 하이픈으로 연결되어 자연스럽게 줄바꿈되는 것을 확인할 수 있습니다.

브라우저 지원 및 참고 사항

auto 값은 브라우저마다 지원 수준이 다르며, 일부 브라우저(특히 Chrome 구버전)에서는 해당 언어의 하이픈 사전이 필요합니다.
정확한 동작을 위해 HTML 문서에 <html lang="ko">처럼 올바른 lang 속성을 지정하는 것이 좋습니다.
Safari와 Internet Explorer 계열에서는 각각 -webkit-, -ms- 벤더 접두사를 함께 사용하는 것이 안전합니다.