text-overflow

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

쇼핑몰 상품리스트를 만들 때, 상품명 길이를 처리하다가 정리하는 포스팅이다. 상품명이 길면 상품박스의 높이에 영향을 주지 않도록, overflow: hidden처리를 한다. 만약 상품명이 다음과 같이 일정한 길이라면 상관없겠지만, HTML 삽입 미리보기할 수 없는 소스 다음과 같이 들쑥날쑥하다면 보기에 안좋으니 처리를 해줘야하겠지..🍴 사실 상품명의 길이가 어떻게 될 지 모르니 뭐가 됐든 처리를 해주는 편이 낫겠다. HTML 삽입 미리보기할 수 없는 소스 .prdtBox .prdtName{ overflow: hidden; // 영역 벗어나면 숨기기 white-space: nowrap; // 줄바꿈 지정 text-overflow: ellipsis; // 영역 벗어나면 '...'로 표시 } HTML 삽입 미..