쇼핑몰 상품리스트를 만들 때, 상품명 길이를 처리하다가 정리하는 포스팅이다.
상품명이 길면 상품박스의 높이에 영향을 주지 않도록, overflow: hidden처리를 한다.
만약 상품명이 다음과 같이 일정한 길이라면 상관없겠지만,
상품리스트
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
다음과 같이 들쑥날쑥하다면 보기에 안좋으니 처리를 해줘야하겠지..🍴
사실 상품명의 길이가 어떻게 될 지 모르니 뭐가 됐든 처리를 해주는 편이 낫겠다.
상품리스트
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
[테스트]
짤막
짤막
[테스트]
약 두 줄 가량의 상품명입니다.
약 두 줄 가량의 상품명입니다.
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
.prdtBox .prdtName{
overflow: hidden; // 영역 벗어나면 숨기기
white-space: nowrap; // 줄바꿈 지정
text-overflow: ellipsis; // 영역 벗어나면 '...'로 표시
}
상품리스트
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
[테스트]
약 두 줄 가량의 상품명입니다.
약 두 줄 가량의 상품명입니다.
[테스트]
약 두 줄 가량의 상품명입니다.
약 두 줄 가량의 상품명입니다.
[테스트]
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
약 세 줄 가량의 아주아주 긴 상품명이 있다고 칩시다.
이렇게 해주면 텍스트는 무조건 한 줄이 되어버린다!!
728x90
'WEB > HTML_CSS' 카테고리의 다른 글
[html] <video> 태그 자동 재생 (0) | 2023.07.18 |
---|---|
[CSS] border 안쪽으로 주기 box-shadow (0) | 2023.07.05 |
[CSS] 특정한 요소를 제외시키는 :not 선택자 (0) | 2023.06.21 |
[HTML] 모바일웹에서 자동링크 해제하기 format-detection (1) | 2023.06.19 |