[위스타그램_CSS] 텍스트가 길어지면 생략기호 나타내기

text-overflow: ellipsis;

아래와 같이 지정된 텍스트박스 길이에 비해 텍스트가 긴 경우, 다른 태그를 덮어쓰는 상황이 생긴다.

그럴때, 사용하는 CSS 가 text-overflow: ellipsis;.

▶️결과


▶️사용가능한 조건
1. block 요소여야 한다.
2. 텍스트가 들어가는 태그의 width / height가 고정이어야 한다.
3. overflow: hidden;을 함께 써준다.
4. 한줄이상 써지지 않기위해 white-space: nowrap 을 함께 써준다.

코드예시:

{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 120px;
  height: 20px;
}