[HTML/CSS] overflow (긴문자열 숨김 및 ... 처리), white-space (자동 줄바꿈 방지)

 

 

 

 

 

 

 

overflow 긴 문자열 숨김, white-space 자동 줄 바꿈

 

 

<div style="text-overflow:ellipsis; overflow: 속성; width:넓이; white-space: nowrap;">문자열</div>

 

width에서 지정해준 크기보다 더 크면 overflow의 속성에 따라 처리된다.

 

 

 

 

overflow

 

속성	설명
visible	박스를 넘어가면서 표시 (기본값)
hidden	벗어난 영역 숨김
scroll	벗어난 영역 스크롤 처리
auto	벗어난 영역 있을 경우 스크롤 처리
text-overflow: ellipsis	벗어난 영역 ... 처리

 

 

 

white-space

 

속성	설명
nowrap	범위와 상관없이 한줄로 표시 (스페이스바 생략)
pre	범위와 상관없이 한줄로 표시 (스페이스바 표시)

 

 

 

 

<div style="text-overflow:ellipsis; overflow:hidden; width:100px; white-space:nowrap;">짧게</div>
<div style="text-overflow:ellipsis; overflow:hidden; width:100px; white-space:nowrap;">길게길게길게길게길게길게길게길게길게길게길게길게</div>
<div style="text-overflow:ellipsis; overflow:visible; width:100px; white-space:nowrap;">띄   어    쓰     기</div>
<div style="text-overflow:ellipsis; overflow:visible; width:100px; white-space:pre;">띄   어    쓰     기</div>

 

짧게

길게길게길...

띄 어 쓰 기

띄 어 쓰 기