[CSS] text-overflow 조건 (넘치는 텍스트 처리)

[CSS] text-overflow 조건 (넘치는 텍스트 처리)

✔️ text-overflow 

: white-space:nowrap; 로 지정하여 텍스트가 영역을 넘쳐도 줄 바꿈이 일어나지 않을 때, 넘치는 텍스트를 처리하는 방법을 지정한다.

: 인라인 블록과 블록 요소에 적용할 수 있으며, white-space:nowrap; 과 overflow-hidden; 속성과 함께 사용해야한다.

.clip {text-overflow: clip;}
.ellipsis {text-overflow: ellipsis;}

💡clip : 넘치는 텍스트를 자른다. (기본)
ellipsis : 테두리에 닿을 정도가 되면 정해준 String 이 표시된다. (기본값은 '...' 이다.)

💡필수 💡  white-space: nowrap; /*자동 줄바꿈 방지*/ overflow: hidden; /*반드시 visible 이외의 값으로 지정*/