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;
}
'STUDY > HTML&CSS' 카테고리의 다른 글
CSS | sidebar 밑에 공간이 남을 때... (0) | 2020.09.14 |
---|---|
CSS | 스크롤바 커스텀 하기! (custom scrollbar) (0) | 2020.07.07 |
CSS | 말풍선 만들기 사이트 ( + 활용) (0) | 2020.04.14 |
CSS | 파일 업로드 css적용하기 (input file custom) (0) | 2020.02.21 |