CSS hyphens 속성으로 텍스트 하이픈 처리 제어하기

CSS의 hyphens 속성을 사용하면 텍스트가 줄바꿈될 때 하이픈(-)이 어떻게 삽입되는지 지정할 수 있습니다. 이 속성은 긴 단어나 영문 텍스트가 좁은 컨테이너 안에서 깔끔하게 줄바꿈되도록 도와줍니다.

hyphens 속성의 주요 값

none: 하이픈을 전혀 삽입하지 않습니다. 수동으로 지정한 위치()조차 표시되지 않습니다.
manual: 개발자가 직접 삽입한 소프트 하이픈()이나 하드 하이픈(—) 위치에만 하이픈을 표시합니다. 기본값입니다.
auto: 브라우저가 해당 언어의 규칙에 따라 적절한 위치에 하이픈을 자동으로 삽입합니다. 정상 작동을 위해 HTML 요소에 lang 속성(예: lang="en")을 지정하는 것이 좋습니다.

예제 1: none과 manual 값 비교

다음 예제는 hyphens 속성의 기본적인 동작 방식을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 20%;
    border: 2px groove lime;
    margin: 10px;
    padding: 10px;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}
div:last-of-type {
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}
</style>
</head>
<body>
<div>
abcdefghi&shy;jklmnopqrstuvwxyz
</div>
<div>
abcdefghi&shy;jklmnopqrstuvwxyz
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS hyphens 속성으로 텍스트 하이픈 처리 제어하기

첫 번째 div(none)에서는 소프트 하이픈이 무시되고, 두 번째 div(manual)에서는 로 지정된 위치에만 하이픈이 나타납니다.

예제 2: auto 값으로 자동 하이픈 삽입

hyphens 값을 auto로 설정하면 브라우저가 자동으로 하이픈을 삽입합니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 10px;
    padding: 10px;
    width: 15%;
    border: 2px ridge darkblue;
    background-color: peachpuff;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
</style>
</head>
<body>
<div>
abcdefghijklmno-pqrstuvw-xyz
</div>
<div>
abcdefghi-jklmnopqrstuvw-xyz
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS hyphens 속성으로 텍스트 하이픈 처리 제어하기

브라우저 호환성 참고 사항

hyphens 속성은 Chrome, Safari 등 일부 브라우저에서 벤더 접두사(-webkit-, -ms-)와 함께 사용해야 완전히 지원됩니다. 따라서 실무에서는 위 예제처럼 표준 속성과 접두사 속성을 함께 작성하는 것이 안전합니다.