하이픈(hyphen) 문단 줄바꿈 처리 방법
하이픈 뒤에서 자동으로 문단이 바뀌어 줄바꿈이 되는 경우가 발생하는 문제를
해결하기 위한 몇 가지 방법을 살펴봅니다.
방법 1
줄바꿈을 무시하고 하이픈 뒤의 내용도 유지하려면 다음 속성을 추가합니다.
속성값이 적용이 되지 않는다면
>!important >
속성을 이용합니다.
word-break: break-all;
word-wrap: break-word;data-editable="true"
data-preview="true"
data-height="480"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="xxORbGy"
style="height: 480px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 하이픈 hypen - 줄바꿈 안하고 유지 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
방법 2
하이픈 앞 단어까지 함께 줄바꿈하려면 다음 속성을 이용합니다. 이 방법은 내용이
길 경우 요소 밖으로 넘어갈 수 있습니다.
white-space: nowrap;data-editable="true"
data-preview="true"
data-height="480"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="ExyNjWj"
style="height: 480px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 하이픈 hypen - 앞단어까지 줄바꿈 하기 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
방법 3
>폭 없는 공백(zero width space) >을 사용하여 줄바꿈이 될 지점에
​ 를 넣어줍니다. 적용이
되지 않을 경우 &를
&로 바꿔보세요.
data-editable="true"
data-preview="true"
data-height="650"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="bGegGXd"
style="height: 650px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="하이픈 hypen - 폭 없는 공백 zero width space 줄바꿈 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.