로메오의 블로그

css 텍스트 말줄임 - text ellipsis 본문

Design/Markup

css 텍스트 말줄임 - text ellipsis

romeoh 2022. 3. 29. 14:05
반응형

한줄 줄이기

.call-summary p {
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
}

 

여러줄 줄이기

.call-summary p {
    white-space: normal; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; /* 3줄 */
    -webkit-box-orient: vertical; 
    overflow: hidden;
}
반응형

'Design > Markup' 카테고리의 다른 글

CSS 가상요소(before)에 svg로 만든 font넣기  (0) 2022.03.30
css 가상요소[Pseudo Element] before, after  (0) 2022.03.30
customer scrollbar - webkit-scrollbar  (0) 2022.03.29
SVG 폰트 만들기  (0) 2022.03.23
Figma에서 Font Awesome 적용하기  (2) 2022.03.17
'Design/Markup' Related Articles more
Comments