CSS 자동 줄바꿈하는 방법

CSS에서 텍스트의 자동 줄 바꿈을 활성화하려면 word-wrap 및 overflow-wrap 속성을 사용할 수 있습니다. 이러한 속성을 사용하면 긴 단어나 긴 문자열이 컨테이너를 넘어갈 때 텍스트가 자동으로 줄 바꿈 됩니다.

 

- word-wrap

    긴 단어가 컨테이너를 넘어갈 때 단어를 분리하고 줄 바꿈을 허용할지를 결정합니다.

//cssCopy code
p
{ 
	word-wrap: break-word; 
}

반응형

- overflow-wrap

    자동 줄 바꿈을 활성화하고, 단어를 나누기 위해 가능한 경우 공백을 사용합니다.

//cssCopy code
p
{ 
	overflow-wrap: break-word; 
}

 

이러한 속성을 사용하면 긴 단어가 화면을 넘어가지 않도록 하면서 자동으로 줄 바꿈을 처리할 수 있습니다. 선택할 속성은 사용하고자 하는 동작과 웹 브라우저 호환성에 따라 다를 수 있습니다. 일반적으로 overflow-wrap을 사용하는 것이 더 권장되는 경향이 있습니다.