CSS - white-space , overflow , text-overflow

white-space

• white-space : 요소 내부의 공백 문자 처리와 줄바꿈 규칙을 지정해주는 속성
• 속성값
  • normal(기본값) : 연속된 공백을 하나의 공백으로 처리 / 텍스트는 컨테이너 너비에 따라 자동으로 줄바꿈
  • nowrap : 모든 공백을 단일 공백으로 처리 / 텍스트는 한 줄로 유지 / 자동 줄바꿈 x
  • pre : 공백과 줄바꿈 유지 / 텍스트 - 자동 줄바꿈 x , 고정폭 글꼴로 표시
  • pre-line : 연속된 공백은 하나로 줄어들지만 줄바꿈은 유지 / 텍스트는 컨테이너의 너비를 초과할 경우 자동으로 줄바꿈
  • pre-wrap : 공백과 줄바꿈 모두 유지 / 텍스트는 컨테이너 너비에 따라 자동으로 줄바꿈

white-space예제

normal(기본값)

nowrap

---

overflow

• overflow : 박스 안에서 콘텐츠가 넘칠 때 표현 방법을 지정하는 속성

• 속성값

  • visible(기본값) : 넘치는 콘텐츠를 그대로 냅두면서 박스를 넘겨 표시
  • hidden : 넘치는 콘텐츠를 자르고 보이지 않게 함
  • scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시하여 스크롤을 내리면 볼 수 있게 함
  • auto : 콘텐츠가 넘치면 자르지만 스크롤바가 표시

overflow 예제

visible(기본값)

hidden

scroll

auto

---

overflow-x / overflow-y

• overflow-x 와 overflow-y: 각각 넘치는 부분을 x, y축으로 지정해서 표현해주는 속성

• 속성값

  • visible : 콘텐츠가 잘리지 않지만 보이지 않을 수 있음
  • hidden : 넘치는 콘텐츠를 자르고 보이지 않게 함
  • scroll : 콘텐츠가 잘리면 항상 스크롤이 지원됨
  • auto : 넘치는 경우 자동으로 스크롤 바 표시
  • no-display : 콘텐츠가 박스 크기에 맞춰지지 않으면 display:none속성이 적용된 것 처럼 박스가 보이지 않게 됨
  • no-content : 콘텐츠가 박스 크기에 맞춰지지 않으면 visibility:hidden속성이 적용된 것처럼 콘텐츠가 보이지 않게 됨

---

text-overflow

• text-overflow: 박스 안에 text 내용이 넘칠 때 어떻게 처리할지를 지정하는 속성

주의 사항

• overflow 속성값이 hidden, scroll, auto 일 대 적용된다. (visible 제외)
• white-space:nowrap 또는 텍스트가 다음 줄로 이동되지 않는 경우 적용된다.

• 속성값
  • clip (기본값) : 텍스트를 자름
  • ellipsis : 잘린 텍스트를 생략 부호(...)로 표시

text-overflow 예제

clip(기본값)

ellipsis