영역 밖으로 넘어갔을 때 ... 표시 / selection 시 영역 색 변화

🍀 overflow 설정

1. hidden : 영역보다 길어지면 넘어가는 부분 숨기기
2. scroll : 항상 스크롤
3. auto : 지정 영역보다 길어지면 스크롤)

🍀 white-space 설정

1. nowrap

2. pre
   : 자동 줄바꿈이 되지 않는 위 두 설정 중 하나를 해줘야 영역밖으로 넘어갔을 때 자동으로 잘라거나 ...으로 보여짐

   /	스페이스와 탭	줄바꿈	자동 줄바꿈
   normal	병합	병합	O
   nowrap	병합	병합	x
   pre	보존	보존	x
   pre-wrap	보존	보존	O
   pre-line	병합	보존	O

* 스페이스와 탭 : 연속된 스페이스와 탭에 대한 처리 방법이다.
병합은 연속된 것을 병합해 1개의 공백으로 바꾸는 것이고,
보존은 입력된 그대로 출력하는 것
* 줄바꿈 : 병합은 연속된 여러 줄바꿈을 1개의 공백으로 바꾸는 것,
보존은 입력된 그대로 출력하는 것
* 자동 줄바꿈 : 내용이 영역의 크기를 벗어날 때 처리방법
O은 자동으로 줄바꿈하여 영역내에 내용을 표시하는 것이고
X는 영역을 벗어나더라도 입력된 대로 출력하는 것

참고 : CSS / white-space / 공백 처리 방법 정하는 속성

🍀 text-overflow 설정

1. clip : 설정한 크기(width)를 넘어가면 그냥 잘라버림
2. ellipsis : 영역 밖으로 넘어가면 그 이후는 ...으로 보여짐

---

🍀 글자 selection 영역 색 변화주기

  p::selection{
  	/* 밑 그림자 색 */
    background-color:rgb(200, 191, 230);
    /* 글자 색 */
    color:rgb(70, 0, 102);
  }

---

🍀 해보자!

<style>
  p::selection{
    background-color:rgb(200, 191, 230);
    color:rgb(70, 0, 102);
  }
  /* 글자가 영역 밖으로 넘어갔을 때 ... 으로 숨기기 */
  p{
    width : 300px;
    /* overflow-hidden(영역보다 길어지면 넘어가는 부분 숨기기) / scroll(항상 스크롤) / auto(지정 영역보다 길어지면 스크롤) */
    overflow : hidden;
    /* 텍스트 줄바꿈이 되지 않음. 이게 있어야 영역밖으로 넘어갔을 때 자동으로 잘라거나 ...으로 보여짐 */
    white-space : pre;
  }
  /* clip(크기에 맞게 넘어가면 그냥 잘라버림) / ellipsis(영역 밖으로 넘어가면 그 이후는 ...으로 보여짐) */
  p.one{  text-overflow:clip; }
  p.two{  text-overflow:ellipsis;  }
</style>

<p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
<p class="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>