[CSS] Text-Overflow로 텍스트 생략 기호로 표시

텍스트 ...으로 표시하기

텍스트가 너무 길 경우 ...으로 생략 하려고 했다.

text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다.

 

text-overflow ellipsis 안먹힘 해결 방법

다음과 같은 조건으로 CSS가 작성되었는지 점검한다.

• 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. 
• white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다.
• overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘어선다. 부모 요소의 width값 보다 text의 길이가 더 긴 경우 overflow: hidden 값으로 overflow를 방지한다.
• text-overflow: ellipsis - 위 속성의 영향으로 숨겨진 문자열을 대신에 ellipsis(...) 표기한다.

.truncate {
  width: 250px; // 가로 너비 제한
  white-space: nowrap; // 개행 방지
  overflow: hidden; // 넘치는 문자열 숨김
  text-overflow: ellipsis; // 문자열이 숨겨졌음을 ...으로 표현
}

 

참고

https://tamagotch.tistory.com/86