[CSS] white-space : 레이아웃에 맞춰 텍스트 줄바꿈(개행) 하기

white-space

내가 지정한 width 값에 대하여 그 하위 텍스트의 공백과 개행 처리를 위해 사용하는 방법이다. 

 

white-space 속성

속성	의미
normal	연속된 공백과 줄바꿈을 공백으로 표시하고, 줄바꿈 함
nowrap	연속된 공백을 하나로 표시하고, 줄바꿈 하지 않음
pre	연속된 공백을 그대로 표시하고, 줄바꿈 하지 않음
pre-wrap	연속된 공백을 그대로 표시하고, 줄바꿈 함
pre-line	연속된 공백을 하나로 표시하고, 줄바꿈 함

 

코드 예시

white-space: pre-line;

 

전체 코드

<div class="whitespace">Lorem       ipsum dolor sit amet, 
    
    
consectetur adipisicing elit.
</div>

.white-space {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    white-space: pre-line;
}

 

결과 화면