CSS | 텍스트 말줄임 ... 처리

STUDY/HTML&CSS

개미606 2021. 1. 14. 11:35

text-overflow: ellipsis로 처리할 수 있으나 몇 가지 조건이 있음

1. overflow: hidden과 white-space: nowrap이 함께 적용되어야 함

2. width에는 픽셀 단위로 값을 설정하거나, %단위를 사용하고 싶다면 max-width를 함께 설정해야 함

예시

.name-cell {
    width: 6%;
    max-width: 85px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}