[CSS] 텍스트 길면 ... 표시하기

쇼핑몰 상품리스트를 만들 때, 상품명 길이를 처리하다가 정리하는 포스팅이다.

상품명이 길면 상품박스의 높이에 영향을 주지 않도록, overflow: hidden처리를 한다.

 

만약 상품명이 다음과 같이 일정한 길이라면 상관없겠지만,

상품리스트

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

 

 

다음과 같이 들쑥날쑥하다면 보기에 안좋으니 처리를 해줘야하겠지..🍴

사실 상품명의 길이가 어떻게 될 지 모르니 뭐가 됐든 처리를 해주는 편이 낫겠다.

상품리스트

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

[테스트]
짤막

[테스트]
약 두 줄 가량의 상품명입니다.

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

.prdtBox .prdtName{
  overflow: hidden;        // 영역 벗어나면 숨기기
  white-space: nowrap;     // 줄바꿈 지정
  text-overflow: ellipsis; // 영역 벗어나면 '...'로 표시
}

상품리스트

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

[테스트]
약 두 줄 가량의 상품명입니다.

[테스트]
약 두 줄 가량의 상품명입니다.

[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.

이렇게 해주면 텍스트는 무조건 한 줄이 되어버린다!!