white-space

• white-space: wrap;
  • 줄 바꿈 해라.
  • white-space의 기본 값.
• white-space: nowrap;
  • 절대 줄 바꿈 금지.
  • 줄 바꿈 하지 않고 한 줄로 쭉 이어지게 나온다.
  • 화면 영역을 넘어가면 스크롤이 생긴다.

overflow

• overflow: auto;
  • 가로방향으로 스크롤바를 무조건 생성.(넘치치 않으면 스크롤바가 안생김)
  • 넘친 영역에 따라서 가로가 생길 수도 있고, 세로가 생길 수도 있고, 둘 다 생길 수도 있음.
  • 자동으로 판단해서 스크롤을 만들어 주겠다.
  • 불필요한 스크롤은 만들어 주지 않음.
• overflow: scroll;
  • 스크롤 바 무조건 생성.
  • 가로, 세로 다 스크롤을 만들어 주겠다.
• overflow-x: scroll;: 가로 축에만 스크롤 생긴다.
• overflow-y: scroll;
  • 세로 축에 스크롤이 생긴다.
  • 세로 축에 스크롤이 생겨도 글자가 넘어가서 해결이 안 되면, 가로 축(x축)에도 스크롤이 생긴다.
• overflow: hidden;: 넘치는 내용 무조건 숨김.

text-overflow

• overflow-x: hiden; 과 함께 text-overflow: ellipsis; 를 해주면 영역을 벗어나는 글자는 가려지고 ... 으로 표시된다.
• ...표시가 없다면 가려진 글 다음에 다음 내용이 더 있는 지 알기 어렵기 때문에 사용.
• ...은 드래그 하면 드래그 안됨. -> 글자(text)가 아님.