CSS - [ text-overflow ... 처리 ]

아래와 같이 코드 작성하면 

width: ~~px; // 너비 설정
overflow: hidden; // 넘칠경우 overflow 숨김 설정
text-overflow: ellipsis; // 글자가 설정한 너비를 넘을 경우 생략부호를 표시함
white-space: nowrap; // 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함

텍스트가 width를 넘어설 경우 ... 처리된다.

 

a태그에 적용하려 했는데 안되어 확인해보니 dispaly: block; 으로 변경해주니 잘 된다!

 

테이블의 경우에는 table 요소에 table-layout: fixed; 속성 추가해주기

 

 

---

2줄 넘었을 때 ... 처리하고 싶은 경우

width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

---

참조

https://junistory.blogspot.com/2017/06/css-ellipsis.html

CSS에서 ellipsis('...')를 처리하는 방법

https://deeplify.dev/front-end/markup/text-ellipsis

[HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제