css 줄바꿈 지정하기 white-space/word-wrap/word-break

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀

white-space

내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정

 

normal : 글자 줄이 자동으로 바뀜, 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀜 (기본 값)
nowrap :  줄 바꿈이 실행되지 않음 즉, 콘텐츠가 다음 줄로 바뀌지 않고 한줄로 표현
pre : HTML원본 텍스트 그대로 표시, !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원

pre-wrap : HTML원본 텍스트 그대로 표시하지만, 영역내 줄 바꿈을 인식
pre-line :  문자를 기준으로 줄을 나눔

 

css

        .box {width: 200px; padding: 10px; border: solid 1px #000;}
        
        .normal {white-space: normal;}
        .nowrap {white-space: nowrap;}
        .pre {white-space: pre;}
        .pre-wrap {white-space: pre-wrap;}
        .pre-line {white-space: pre-line;}

 

html

   <h3>normal</h3>
    <p class="box normal">
        안녕하세요 감사해요 잘있어요 다시 만나요
        아침해가 뜨면(아침해가 뜨면) 매일 같은 사람들과
        또 다시 새로운 하루일을 시작해
    </p>

    <h3>nowrap</h3>
    <p class="box nowrap">
        안녕하세요 감사해요 잘있어요 다시 만나요
        아침해가 뜨면(아침해가 뜨면) 매일 같은 사람들과
        또 다시 새로운 하루일을 시작해
    </p>

    <h3>pre</h3>
    <p class="box pre">
        안녕하세요 감사해요 잘있어요 다시 만나요
        아침해가 뜨면(아침해가 뜨면) 매일 같은 사람들과
        또 다시 새로운 하루일을 시작해
    </p>

    <h3>pre-wrap</h3>
    <p class="box pre-wrap">
        안녕하세요 감사해요 잘있어요 다시 만나요
        아침해가 뜨면(아침해가 뜨면) 매일 같은 사람들과
        또 다시 새로운 하루일을 시작해
    </p>

    <h3>pre-line</h3>
    <p class="box pre-line">
        안녕하세요 감사해요 잘있어요 다시 만나요
        아침해가 뜨면(아침해가 뜨면) 매일 같은 사람들과
        또 다시 새로운 하루일을 시작해
    </p>

 

결과

결과

 

word-wrap

박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여 

(white-space: normal;일 경우)

 

normal : 영어/숫자/기호 (띄어쓰기X) 내용이 많을경우 줄바꿈 없이 영역 밖으로 나옴

break-word : 영역안에서 줄바꿈 적용

 

css

        .box {width: 350px; padding: 10px; border: solid 1px #000;}
        .point {color: red;}

        .normal {word-wrap: normal;}
        .break-word {word-wrap: break-word;}

 

결과

결과

 

word-break

아시아, 비아시아 언어의 줄 바꿈을 모두 제어

 

normal : 한국어,중국어,일본어 문자는 글자 기준, 그밖에 문자는 단어 기준으로 줄 바꿈

break-all : 글자 기준으로 줄 바꿈

keep-all : 단어 기준으로 줄 바꿈

 

css

        .box {width: 350px; padding: 10px; border: solid 1px #000;}
        .point {color: red;}

        .normal {word-break: normal;}
        .break-all {word-break: break-all;}
        .keep-all {word-break: keep-all;}

 

결과

결과

결과

 

word-wrap + word-break

css

        .box {width: 350px; padding: 10px; border: solid 1px #000;}
        .point {color: red;}

        .normal {word-break: normal;}
        .break-all {word-break: break-all;}
        .keep-all {word-break: keep-all;}

        .break-word {word-wrap: break-word;}

 

결과

결과

결과

 

 

결론 👍

결론 css 가장 많이 쓸 1순위 : 글자로 줄바꿈 될 때

        p {
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
        }

 

css 가장 많이 쓸 2순위 : 단어로 줄바꿈 될 때

        p {
            white-space: normal;
            word-wrap: break-word;
            word-break: keep-all;
        }

 

추가 사항

word-wrap 속성이 overflow-wrap 속성으로 이름 바뀜.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap