[CSS] overflow-wrap 긴 단어 처리 방법

Yuri Lee·2022년 2월 24일
0

Intro

긴 단어를 처리하는 방법에 대해서 알아보자. 많은 방법이 있겠지만 CSS의 word-wrap 속성에 대해 소개하고자 한다.

overflow-wrap

overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용된다.

word-break와는 달리, overflow-wrap은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것이다.

이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 word-wrap으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었다고 한다. 요즘은 overflow-wrap으로 다시 지어지고, word-wrap은 동의어이다.

Syntax

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Examples

<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;
}

word-break

CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정한다.

Syntax

/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함 */

/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;
  • normal
  • break-all
  • keep-all

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

profile
Step by step goes a long way ✨

0개의 댓글