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