[css] 말줄임

컨텐츠 길이가 길어질 경우, 말줄임 태그 사용

 

- 텍스트 말줄임
1. 너비 
2. white-space: nowrap; 한줄
3. overflow: hidden; 넘침
4. text-overflow: ellipsis; (****)

- 여러줄 말줄임 -> 접두어 (크롬, 사파리만 사용 가능)
display: -webkit-box;
-webkit-line-clamp: 줄수;
-webkit-box-orient: vertical 

 

★ 너비가 필수, 보통 아래 3가지 세트 ★

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 

예시1) 

<style>
 .box1 {
            /* 너비가 필수, 보통 아래 3가지 세트 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>

 

 

결과 이미지

 

예시 2)

 <style> 
   .box2 {
            height: 80px;
            overflow: hidden; 
            
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            

        }
        
    </style>

결과 이미지