[CSS] 텍스트가 넘칠때... (텍스트 한줄효과) text-overflow

2021. 3. 13. 01:55Program/CSS

텍스트가 넘칠때... text-overflow

CSS의 속성 세트가 숨겨진 오버 플로우의 콘텐츠에서 문자열이 넘치는 현상을 다음과 같이 정리할 수 있다.

(이 text-overflow의 속성은 인라인에서 블록 컨테이너 요소를 넘쳐나는 콘텐츠에만 영향을 준다.)

text-overflow: clip;
/* 컨텐츠 영영의 한도에서 텍스트를 자르기 때문에 문자 중간에서 잘릴 수 있음 */

text-overflow: ellipsis;
/* 잘린 텍스트를 줄임표 (...)로 표시하여 줌 하지만 줄임표를 표시할 공간이 없으면 역시 잘림...*/

text-overflow: "-";

text-overflow: "";

텍스트가 컨테이너를 넘치게 하려면 다른 CSS 속성을 설정하도록 한다.

overflow: hidden;
white-space: nowrap;