(css) 글자수 넘어가면 말줄임표

글자수가 어느정도넘어가면 말줄임표 처리를 하려한다.

더 추가할 기능은 있지만 우선 말줄임표 처리에 대해 먼저 정리한다.

이럴 때 사용 가능한 속성을 text-overflow: ellipsis 와 -webkit-line-clamp: 숫자 를 사용할수있다.

한줄만 보이게 하려면 

text-overflow:ellipsis 를 사용하면 한문장에서만 사용가능하고 이걸 적용하면... 말줄임표가 숨겨지는 영역의 끝부분에 생긴다.

    .halfContent {
        margin:100px;
        outline: 1px solid black;
        display: block;
        color: black;
        width: 630px;
        font-size: 20px;
        font-weight: bolder !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }

white-space : nowrap 속성으로 줄바꿈을 방지하고

해당 너비를 넘어선 부분의 글자들을 overflow : hidden을 적용하여 숨겨준다.

 

여러줄 단위로 글자 자르기

    .halfContent{
        margin:100px;
        outline: 1px solid black;
        display: block;
        color: black;
        width: 630px;
        font-size: 20px;
        font-weight: bolder !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 1.2;
        text-align: left;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

여러줄 보이게 하려면  white-space : nowrap 속성을 해제해서 너비에 맞춰 줄바꿈이 생기게 하고 보이게 할 글자의 줄 수만큼 첫줄 줄높이를line-height: 1.2 지정한다.

word-wrap : break-word : - 단어 단위로 줄바꿈
text-align : left : - 텍스트를 가운데나 오른쪽 정렬을 하게 되면 말줄임표가 이상한 곳으로 갈 수 있음
display: -webkit-box : 유연하게 height를 증감시킬 수 있는 플렉스 박스형태로 변환
-webkit-line-clamp: 3 : 보여줄 줄 수 -> 이거에 따라서 ... 이 3번째 줄로 간다. 
-webkit-box-orient: vertical : 플렉스 박스의 방향 설정(가로)

height 를 지정해 주지않고 -webkit-line-clamp: 3  이 속성만 주어도 3번째 줄에 말줄임표 생기며 3번째 줄까지만 보인다고 하는데 나는 글자가 많아서 그런가 height 를 주지않으면 글은 5줄까지 보이고 말줄임표는 3째 줄에 생겼다.