상품명 css 수정 채택완료

Copy
.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 부분이 상품명인데 

1891205994_1717398012.9349.png

최대 2줄 까지 입력이 가능하고, 1줄 일때는 공백 처럼 보여주고 싶습니다.

어느 부분의 css를 바꾸면 될까요?

답변 2개

채택된 답변
+20 포인트

아래의 내용을 한번 참고를 해보세요..

.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 지정하시면 빠릅니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고