상품명 짤리는 문제(반응형)입니다.
본문
이제 대부분의 문제는 다 잡았네요. (2주동안 개 노가다 ㅠㅠ)
http://theme.sir.kr/youngcart5/demo/kidstore
아리아나벤티님의 위 테마를 사용중입니다.
main.10.skin.php (베스트,신상품에 적용)
list.10.skin.php (카테고리 리스트 적용)
두 스킨 모두 상품명이 길어지면 특정 width에서 그냥 짤립니다.
... 따위 없이 바로 짤립니다.
상품명이 노출되는 skin.php 내용입니다.(내용이 공통됩니다.)
if ($this->view_it_id) {
echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";
}
if ($this->href) {
echo "<div class=\"sct_txt\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n"; // 이 부분에서 sct_txt 클래스를 스타일로 적용하라는데... ㅠㅠ
}
if ($this->view_it_name) {
echo stripslashes($row['it_name'])."\n"; // 이 부분이 상품명을 불러오겠죠.
}
if ($this->href) {
echo "</a></div>\n";
}
if ($this->view_it_price) {
echo "<div class=\"sct_cost\">\n";
echo display_price(get_price($row), $row['it_tel_inq'])."\n";
echo "</div>\n";
}
근데... 스타일시트 화일을 들여다보면 sct_txt 클래스에 별다른 내용은 없습니다.
css 내용입니다. 메인20번스킨까지 함께 올려봅니다.
/* 메인(베스트) 상품목록 스킨 10 */
.sct_10 li{text-align:center;margin-bottom:5px;}
.sct_10 .sct_img{display:block;padding:10px}
.sct_10 .sct_img:hover img{
background:url(img/zoom.png);
background:#000;
opacity:0.7;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
/* sct_txt 클래스 가출 ㄷㄷㄷㄷ 안보임 ㅠㅠ */
.sct_10 .sct_img img{
width:100%;
height:auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sct_10 .sct_cost {color:#ff405e;font-weight:bold;}
.sct_10 .sct_cost .cust_price{display:block;color:#696969;font-size:11px;font-weight:normal;text-decoration:line-through}
.li_more{text-align:center;display:block;}
.li_more img{width:30px;margin:5px 0}
.li_more p{color:#aaa;margin-top:5px;display:none;}
.li_more .li_more_btn{clear:both;width:100%;display:block;}
.li_more button{background:#63a1b8;width:205px;padding:8px 0 ;font-size:0.917em;color:#fff;margin-top:45px;border:none;text-align:center;border-radius:5px}
/* 메인(최신) 상품목록 스킨 20 */
.sct_20 li{text-align:center;margin-bottom:20px;}
.sct_20 .sct_img{display:block;padding:10px} /* 혹시나해서 20번스킨 적용해봐도 똑같습니다. */
.sct_20 .sct_img img{width:100%;height:auto;}
.sct_20 .sct_txt{text-align:center} /* 얘는 여기 있는데 중앙정렬빼곤 특이점은 없습니다. ㅠㅠ */
.sct_20 .sct_cost {color:#ff405e;font-weight:bold;text-align:center}
.sct_20 .sct_cost .cust_price{display:block;color:#696969;font-size:11px;font-weight:normal;text-decoration:line-through}
http://sir.kr/qa/120560?stx=ellipsis&sst=wr_num&unanswered=0&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85
비슷한 상황의 글이 보여서 해봣는데 소용없습니다. ㅎㅎ ㅠ
일반적으로 상품명 길이가 width값을 오버하면 두줄로 표기해야 하는게 보편적일텐데
그걸 어떻게 할지 모르겠네요 ^^;
=========== 내용추가 ===========
어찌저찌해서 상품명 두줄을 만들었습니다. 하하하하하
근데... 줴길슨 금액 위치가 고정입니다. 귀한 상품명께서 두줄로 내려오셨으면
냉큼 눈치보고 아랫줄로 내려가야할것이 안내려가고 버팁니다. ㅠㅠ
그래서 두번째줄 상품명과 금액이 겹치네요 ㄷㄷㄷㄷ
css 는 항상 저의 인내심을 시험하네요 ㅎㅎㅠ
답변 1
#sct_wrap .sct_txt a 스타일에 height값이 20px으로 지정되어 있어서
둘째줄로 내려가는 내용부터는 안보이고 있네요.
height:auto로 하면 제목이 얼마나 길어지던지 다 보여지기는 하는데
그러면 상품글마다 높이가 일정치 않아 정렬이 꼬일거예요.
height:40px(2줄이니 기존의 2배)로 css를 수정하시고 특정 글자수 이상부터는
상품명이 말줄임표로 나오게 소스를 수정하시는게 좋을거 같아요!
말줄임 소스는 아래 링크를 참고해보세요!
http://sir.kr/qa/102790?stx=%EB%A7%90%EC%A4%84%EC%9E%84&sst=wr_num&unanswered=0&s_tag=
고맙습니다. ^^
슬리님 덕분에 쉽게 해결했습니다.
오늘은 꿀잠 잘 수 있을것 같네요. ㅎㅎ
