긴 단어를 처리하는 방법에 대해서 알아보자. 많은 방법이 있겠지만 CSS의 word-wrap 속성에 대해 소개하고자 한다.
overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용된다.
word-break와는 달리, overflow-wrap은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것이다.
이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 word-wrap으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었다고 한다. 요즘은 overflow-wrap으로 다시 지어지고, word-wrap은 동의어이다.
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
<p class="normal">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (normal)</p>
<p class="overflow-wrap">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (overflow-wrap)</p>
<p class="word-break">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (word-break)</p>
<p class="hyphens">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (hyphens)</p>
p {
width: 13em;
background: gold;
}
.overflow-wrap {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
.hyphens {
hyphens: auto;
}
CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정한다.
/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함 */
/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;
https://www.codingfactory.net/10661
https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/ko/docs/Web/CSS/word-break