[CSS] 말줄임(...) 처리

CSS를 통해 넘친 콘텐츠 또는 라인수를 넘어가는 글자에 대하여 뒤에 '...'이 붙는 말줄임 처리를 할 수 있다.

한줄일 경우와 여러줄 일때 구현방법이 다르다.

 

한줄인 경우

• text-overflow 속성의 'ellipsis'를 통해 넘어가는 글자를 말줄임(...) 처리한다.
• 'white-space: nowrap',  'overflow: hidden' 설정을 꼭 해주어야한다.
  • 'white-space: nowrap': 줄바꿈없이 한줄로 표시
  • 'overflow: hidden': 넘친 콘텐츠 안보이게 처리

<style>

    div {
        border: 1px solid gray;
        width: 400px;
        padding: 10px;
    }

    .test-line {
        width: 300px;
        background-color: lightyellow;
    }

    .one-line-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>


<div><p class="test-line one-line-ellipsis"><strong>test one line ellipsis.</strong>testestestestestestestestestestestestestestestestestestestestestestestestestestestest</p></div>

 

여러줄인 경우

• '-webkit-line-clamp' 속성을 통해 제한할 줄 수 지정한다.
  • 'display' 속성값으로 '-webkit-box' 또는 '-webkit-inline-box'를 사용해야함
  • '-webkit-box-orient: vertical'를 꼭 설정해줘야 동작
  • 말줄임 표시는 되지만 넘친 콘텐츠는 숨겨지지 않기 때문에 'overflow: hidden' 설정
• 필요에 따라 'word-break' 설정값을 통해 단어를 끊는 방식을 조정해준다.
• 'display:-webkit-inline-box'를 사용 시 같은 레벨의 요소와의 위치가 안맞을 수 있으므로,
  'vertical-align' 속성을 통해 위치를 맞춰준다.

<style>

    div {
        border: 1px solid gray;
        width: 400px;
        padding: 10px;
    }

    .test-line {
        width: 300px;
        background-color: lightyellow;
    }

    .two-line-ellipsis-box {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .two-line-ellipsis-inline-box {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        vertical-align: bottom;
    }

    .two-line-ellipsis-box-new-line {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .two-line-ellipsis-inline-box-new-line {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

</style>

<div><span class="test-line two-line-ellipsis-box"><strong>test two line ellipsis box.</strong>testestestestestestestestestestestestestestestestestestestestestestestestestestestest</span><button>click me!</button></div>
<div><span class="test-line two-line-ellipsis-inline-box"><strong>test two line ellipsis inline box.</strong> testestestestestestestestestestestestestestestestestestestestestestestestestestestest</span><button>click me!</button></div>
<div><p class="test-line two-line-ellipsis-box-new-line"><strong>test two line ellipsis box new line.</strong> This is line two (test test test test)<br/>This is line three (test test test test)</p></div>
<div><p class="test-line two-line-ellipsis-inline-box-new-line"><strong>test two line ellipsis inline box new line.</strong> This is line two (test test test test)<br/>This is line three (test test test test)</p></div>