많은 문자 언어에서 음절 및 단어 사이의 경계를 나눌 수 있습니다. 이렇게 하면 텍스트 영역에 더 적은 행을 추가하여 공간을 절약할 수 있도록 텍스트 줄에 더 많은 문자를 배치할 수 있습니다. 이러한 언어에서는 줄바꿈이 하이픈('-')으로 시각적으로 표시됩니다.
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
로 설정됩니다. 이 경우 사용자 에이전트가 하이픈 위치를 자동으로 결정하므로 소프트 하이픈이 필요하지 않습니다. 창 크기를 조절하면 소프트 하이픈이 없더라도 브라우저가 이 예의 두 번째 예와 동일한 위치에 하이픈을 추가하는 것을 확인할 수 있습니다. 창을 계속 축소하면 브라우저에서 텍스트에서 두 음절 사이의 선을 줄바꿈할 수 있음을 알 수 있습니다.