text-wrap CSS 단축 속성은 요소 안의 텍스트가 어떻게 감싸지는지를 제어합니다. 다양한 값들은 다음을 제공합니다.

• 줄바꿈된 제목에서 더 균형있는 줄 길이 제공과 같은 타이포그래피 향상
• 줄 바꿈을 완전히 비활성화하기

시도해 보기

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<section>  <div>    <p>Edit the text in the box:</p>    <div>      <p contenteditable="">        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut        cum eum id quos est.      </p>    </div>  </div></section>

.whole-content-wrapper {  display: flex;  flex-direction: column;  align-items: center;  width: 100%;}#example-element {  border: 1px solid #c5c5c5;  width: 250px;}

구성 속성

이 속성은 다음 CSS 속성의 단축 속성입니다.

• text-wrap-mode
• text-wrap-style

구문

/* 키워드 값 */text-wrap: wrap;text-wrap: nowrap;text-wrap: balance;text-wrap: pretty;text-wrap: stable;/* 전역 값 */text-wrap: inherit;text-wrap: initial;text-wrap: revert;text-wrap: revert-layer;text-wrap: unset;

text-wrap 속성은 아래 나열된 값 중에서 선택된 하나의 키워드로 지정됩니다.

값

wrap

텍스트가 적절한 문자를 따라 (영어와 같은 언어에서는 공백) 줄바꿈되어 넘치는 것을 최소화됩니다. 이는 기본값입니다.

nowrap

텍스트가 줄을 따라 줄바꿈되지 않습니다. 새 줄로 바뀌는 대신 텍스트는 이를 담고 있는 요소에 넘쳐도 그대로 표시됩니다.

balance

텍스트는 각 줄에 있는 글자의 숫자를 고려하여 가장 균형 있게 줄바꿈되어 레이아웃의 품질과 가독성을 향상시킵니다. 문자를 세는 것과 여러 줄에 걸쳐 균형을 잡는 것은 계산 비용이 들고, 이 값은 제한된 줄 수의 텍스트 블록에만 적용됩니다. (크로미움에서는 6줄 이하, 파이어폭스에서는 10줄 이하)

pretty

속도보다는 더 나은 레이아웃을 위해 사용자 에이전트가 더 느린 알고리즘을 사용하게 된다는 것을 제외하고는wrap 값과 같은 동작을 합니다. 이는 좋은 타이포그래피가 성능보다 중요한 본문 (orphans가 최소화해야 하는 경우 등)에 사용됩니다.

stable

사용자가 콘텐츠를 수정할 때, 수정 중인 줄 이전의 줄들은 재배치되지 않고 그대로 유지되는 것을 제외하고는wrap 값과 같은 동작을 합니다.

설명

텍스트가 (<p>) 단락이나 (<h1>–<h6>) 제목과 같은 콘텐츠 블록 내에서 줄을 넘나드는 두 가지 방법이 있습니다. 사용자에 의해 제어되는 강제 줄바꿈과 브라우저에 의해 제어되는 매끄러운 줄바꿈입니다.text-wrap 속성은 어떻게 매끄러운 줄바꿈을 수행할지 브라우저에게 지시하는 속성입니다.

text-wrap 에 지정하는 값은 스타일링할 텍스트의 줄 수, 텍스트가contenteditable 인지의 여부 그리고 성능과 외형 중 어떤 것을 우선순위로 두는지에 따라 달라집니다.

스타일링된 콘텐츠가 제목, 캡션, 인용 등 짧은 줄 수에 제한될 때text-wrap: balance 를 추가하면 각 줄에 있는 문자의 글자 수의 균형 있게 조정하여 레이아웃의 품질과 가독성을 높일 수 있습니다. 브라우저는 이 속성에 영향을 받는 줄 수를 제한하기 때문에 성능에는 큰 영향이 없습니다.

텍스트의 구획에는 더 이상text-wrap: pretty 를 사용할 수 없습니다.pretty 는 성능에 좋지 않은 영향을 끼칠 수 있음을 인지해야 하고, 레이아웃이 속도보다 중요한 경우에만 긴 텍스트 블록에 사용해야 합니다.

stable 값은contenteditable 가 적용된 콘텐츠에서 사용자 경험을 향상시킵니다. 이 값은 사용자가 텍스트를 수정할 때 수정 중인 영역 이전의 줄들을 안정적으로 유지합니다.

형식 정의

형식 구문

text-wrap =
<'text-wrap-mode'>||
<'text-wrap-style'>

<text-wrap-mode> =
wrap|
nowrap

<text-wrap-style> =
auto|
balance|
stable|
pretty|
avoid-orphans

예제

간단한 텍스트 줄바꿈 값 비교

HTML

<h2 contenteditable="true">  기본 동작입니다. 제목 텍스트가 평범하게 줄바꿈됩니다.</h2><h2 contenteditable="true">  이 경우에는 제목 텍스트가 줄바꿈되지 않고, 컨테이너에 넘칩니다.</h2><h2 contenteditable="true">  이 경우에는 제목 텍스트가 줄마다 균형 잡혀 있습니다.</h2>

CSS

.wrap {  text-wrap: wrap;}.nowrap {  text-wrap: nowrap;}.balance {  text-wrap: balance;}h2 {  font-size: 2rem;  font-family: sans-serif;}

결과

예제 내의 텍스트는 수정이 가능합니다. 텍스트를 변경하거나, 긴 단어를 추가하여 어떻게 줄과 단어의 길이가 줄바꿈에 영향을 미치는지 확인해 보세요.

명세서

브라우저 호환성

같이 보기

• white-space
• white-space-collapse
• CSS 택스트 모듈
• developer.chrome.com의CSStext-wrap: balance
• developer.chrome.com의CSStext-wrap: pretty