Programming > CSS

div안의 컴포넌트가 브라우저 줄이면 자동 개행되는 것 방지

컴포넌트 자동 줄바꿈 방지

white-space: nowrap; 을 지정해 준다.

HTML source

<div style="white-space: nowrap;">
       <button class="button button2 btn_style01">테스트용 버튼 1번</button>
       <button class="button button1 btn_style01">테스트용 버튼 2번</button>
       <button class="button button3 btn_style01">테스트용 버튼 3번</button>
       <button class="button button4 btn_style01">테스트용 버튼 4번</button>
</div>
<br/>
<div>
       <button class="button button2 btn_style01">테스트용 버튼 1번</button>
       <button class="button button1 btn_style01">테스트용 버튼 2번</button>
       <button class="button button3 btn_style01">테스트용 버튼 3번</button>
       <button class="button button4 btn_style01">테스트용 버튼 4번</button>
</div>

브라우저의 폭에 따른 결과 (white-space: nowrap;)

브라우저 폭이 줄어들면 nowrap가 없는 경우 자동 개행 (아랫부분)