상품명 css 수정
본문
.sct_10 .sct_sns img{width:18px}
.sct_10 .sct_icon {margin:10px 0}
.sct_10 .sct_cost {margin:10px 0;font-size:22px;font-weight:bold;color: red; border-top: 1px solid #e5e5e5;}
.sct_10 .sct_cost .sct_discount{display:inline-block;color:#999;font-size:0.92em;text-decoration:line-through;font-weight:normal}
.sct_10 .sct_txt{margin:25px 0; font-size:18px;font-weight: 400; -webkit-line-clamp: 2;}
.sct_10 .sct_basic{color:#888;margin:5px 0;font-size:0.92em}
.sct_10 .sct_star {display:none; margin-top:5px;width:75px}
.sct_10 .sct_star img{width:100%;height:auto}
이부분에서 .sct_txt 부분이 상품명인데
최대 2줄 까지 입력이 가능하고, 1줄 일때는 공백 처럼 보여주고 싶습니다.
어느 부분의 css를 바꾸면 될까요?
답변 2
아래의 내용을 한번 참고를 해보세요..
.sct_10 .sct_sns img {
width: 18px;
}
.sct_10 .sct_icon {
margin: 10px 0;
}
.sct_10 .sct_cost {
margin: 10px 0;
font-size: 22px;
font-weight: bold;
color: red;
border-top: 1px solid #e5e5e5;
}
.sct_10 .sct_cost .sct_discount {
display: inline-block;
color: #999;
font-size: 0.92em;
text-decoration: line-through;
font-weight: normal;
}
.sct_10 .sct_txt {
margin: 25px 0;
font-size: 18px;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3.6em; /* 2줄 높이 계산 */
line-height: 1.8em; /* 한 줄의 높이 */
}
.sct_10 .sct_basic {
color: #888;
margin: 5px 0;
font-size: 0.92em;
}
.sct_10 .sct_star {
display: none;
margin-top: 5px;
width: 75px;
}
.sct_10 .sct_star img {
width: 100%;
height: auto;
}
가장 간단하게 하려면 div 로 감싸고
해당 css 가 2줄일때 크기를 계산하셔서 min-height 지정하시면 빠릅니다.
