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

 

 

 

 

 

1. 긴 문자열 숨김 및 생략 (ellipsis, ... )

긴 문자열을 숨기거나 생략 ('...') 처리할 때 overflow를 사용한다.

 

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

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

 

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

 

 

 

2. 줄 바꿈 방지 

문자열의 줄 바꿈을 방지할 때 white-space의 아래 옵션을 사용한다.

white-space 에는 줄바꿈이 일어나는 다른 옵션도 있다(normal, pre-wrap, pre-line, break-spaces).

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

 

 

 

 

 

 

#참고사이트

https://developer.mozilla.org/ko/docs/Web/CSS/overflow

https://developer.mozilla.org/ko/docs/Web/CSS/white-space