많은 문자 언어에서 음절 및 단어 사이의 경계를 나눌 수 있습니다. 이렇게 하면 텍스트 영역에 더 적은 행을 추가하여 공간을 절약할 수 있도록 텍스트 줄에 더 많은 문자를 배치할 수 있습니다. 이러한 언어에서는 줄바꿈이 하이픈('-')으로 시각적으로 표시됩니다.
CSS 텍스트 모듈 수준 3에서는 하이픈이 사용자에게 표시되는 시점과 하이픈이 표시될 때의 동작을 제어하는 하이픈 속성을 정의합니다. Chrome 버전 55부터 하이픈 속성을 구현합니다.
사양에 따라 하이픈 속성에는 none, manual, auto의 3가지 값이 있습니다. 이를 설명하기 위해 다음 예와 같이 소프트 하이픈 (­)을 사용해야 합니다.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
소프트 하이픈은 후행 여백에서 발생할 때만 표시되는 하이픈입니다. Chrome 55 이상에서 하이픈이 렌더링되는 방식은 CSS hypens 속성의 값에 따라 다릅니다.
-webkit-hyphens: manual;
hyphens: manual;
이들을 결합하면 다음과 같은 결과가 나옵니다.
소프트 하이픈은 표시되지 않습니다. 소프트 하이픈이 포함된 단어가 한 줄에 들어가면 하이픈이 표시되지 않습니다. 이제 하이픈의 세 가지 값이 모두 어떻게 작동하는지 살펴보겠습니다.
아무것도 사용하지 않음
첫 번째 예에서는 하이픈 속성이 none로 설정됩니다. 이렇게 하면 소프트 하이픈이 표시되지 않습니다. 'elit'이라는 단어가 표시되는 텍스트 줄에 맞지 않도록 창 크기를 조정하여 이를 확인할 수 있습니다.
수동 사용
두 번째 예에서 하이픈 속성은 manual로 설정되어 있습니다. 즉, 소프트 하이픈은 여백이 단어 'elit'를 줄바꿈하는 경우에만 표시됩니다. 다시 말하지만 창 크기를 조정하여 이를 확인할 수 있습니다.
자동 사용 중
세 번째 예에서는 하이픈 속성이 auto로 설정됩니다. 이 경우 사용자 에이전트가 하이픈 위치를 자동으로 결정하므로 소프트 하이픈이 필요하지 않습니다. 창 크기를 조절하면 소프트 하이픈이 없더라도 브라우저가 이 예의 두 번째 예와 동일한 위치에 하이픈을 추가하는 것을 확인할 수 있습니다. 창을 계속 축소하면 브라우저에서 텍스트에서 두 음절 사이의 선을 줄바꿈할 수 있음을 알 수 있습니다.