CSS 말줄임, 점처리, 생략처리 방법

작은 공간에서 긴문장을 한 줄에 표현하지 못할때 쓸 수 있는 방법입니다.

개발단에서 글자를 바이트 단위로 끊어 표현할 수 있지만 css로도 말줄임을 표현할 수 있으니

방법을 알려드리도록 하겠습니다.

.box{
    width:300px;
    overflow:hidden;  //width 값에 벗어나면 숨김
    text-overflow:ellipsis;  //점처리
    white-space:nowrap;  //글씨가 길어도 아래로 떨어지지 않게 처리
}
 

여기서 주의 할점은 꼭 width값이 존재해야 합니다. 그래야 점처리가 효과적으로 나타날 수 있습니다.

위의 기술은 한줄문장을 말줄임표시 처리를 한다면

2줄에서 또는 3줄에서 자기가 원하는 라인번째에 말줄임을 할 수 있는 CSS 기술이 있습니다.

.box{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*여기서 라인을 선택 하여 말 줄임*/
    -webkit-box-orient: vertical;
}
 

이제 자신이 원하는 라인의 말줄임 처리도 문제 없을거라는 생각이 듭니다. :)