CSS 말줄임

# CSS 말줄임

1. 한줄

브라우저 지원 IE7 ~ , Chrome, safari, firefox

.text {

        white-space:nowrap;         //줄바꿈이 되지 않게 처리

        overflow:hidden;            //넘치는 글자를 잘라줌

        text-overflow:ellipsis;     //... 처리

      }

- 이렇게 적용해도 안되는 경우에는 width 값을 적용해주어야한다.

2. 두줄

브라우저 지원 Chrome, safari    // IE, firefox 는 지원하지 않음

.text {

        font-size:1em;                    //폰트 사이즈 지정

        overflow:hidden;                  //넘치는 글자를 잘라줌

        text-overflow:ellipsis;           //... 처리

        line-height:1.5;                  //줄 높이를 설정

        height:3em;                       //높이 설정

        word-wrap:break-word;             //긴단어를 끊어서 줄바꿈하기

        display:-webkit-box;              //flex box 형대로 바꾸줌

        -webkit-line-clamp:2;             //보여줄 줄의 갯수

        -webgit-box-orient:vertical;      // flex box의 방향 설정

      }