CSS 텍스트 말줄임과 브라우저 접두어 사용 방법

 

css 텍스트 말줄임 ellipsis

계속 css 잊어버려서 나중에 생각 안날 때 참고하려고 적어둠

한줄 말줄임

결과)

test text test text….

로 표시

.ellipsis_1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    
}

두줄 말줄임

결과)

test text test text test text

test text test text…..

로 표시

ellipsis_2 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

세줄 말줄임

결과)

test text test text test text

test text test text test text

test text test text…..

로 표시

ellipsis_3 {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}

브라우저 별 접두어 

  • -webkit- : 구글, 사파리 브라우저에 적용.
  • -moz- : 파이어폭스 브라우저에 적용.
  • -ms- : 익스플로러에 적용. (생략 가능)
  • -o- : 오페라 브라우저에 적용.

답글 남기기