CSS Text 오버플로우

Overflow 할경우 대체할 텍스트 정하기

div.a {
    white-space: nowrap; 
    width: 50px; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}
div.b {
     white-space: nowrap; 
     width: 50px; 
     overflow: hidden;
     text-overflow: ellipsis; 
     border: 1px solid #000000;
}

div.c {
     white-space: nowrap; 
     width: 50px; 
     overflow: hidden;
     text-overflow: "----"; 
    border: 1px solid #000000;
}

 

한줄 혹은 여러줄을 남기고 자르는 경우

.target { 
    /* 한 줄 자르기 */ 
    display: inline-block; 
    width: 200px; 
    white-space: 
    nowrap; overflow: hidden; 
    text-overflow: ellipsis; 
    /* 여러 줄 자르기 추가 스타일 */ 
    white-space: normal; 
    line-height: 1.2; 
    height: 3.6em; 
}