게시판을 만들고있는데 최신게시물에 보이는 제목 크기가 너무 깁니다

게시판을 만들고있는데 최신게시물에 보이는 제목 크기가 너무 깁니다

QA

게시판을 만들고있는데 최신게시물에 보이는 제목 크기가 너무 깁니다

본문

http://rosookwan0.dothome.co.kr/ 

이 주소인데 중간 유튜브 제목이 (테스트3)인데 f12로 확인해보면 제목 크기가 너무 길어서

쓸모없이 오른쪽 공백이 너무 큽니다.이 게시물 제목 크기를 줄이는 법이 있을까요?



저 latest.ski.php 는


<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');


// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);


$gallery_width = '120';

$gallery_height = '90';

?>


<!-- <?php echo $bo_subject; ?> 최신글 시작 { -->

<div class="lt">


<div class="skinmall-body">

    <ul class="row">

    <?php for ($i=0; $i<count($list); $i++) {  ?>

        <li class="col-xs-4 col-sm-3">

            <div class="thumb">

                <?php

/// echo $list[$i]['wr_link1'];

$pattern = "=";

$splitArr = split($pattern,$list[$i]['wr_link1']);

//echo $splitArr[1];

                $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_link1'], $gallery_width, $gallery_height);


                echo "<a href=\"".$list[$i]['href']."\">";

                if($thumb['src']) {

                    $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';

                } else {

                    // $img_content = '<img src="'.$latest_skin_url.'/img/image_not_available_300.jpg" alt="'.$thumb['alt'].'" >';

// $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_link1'], $gallery_width, $gallery_height);

$youtubeThumbPath = "https://img.youtube.com/vi/".$splitArr[1]."/default.jpg";

$img_content = '<iframe width="120" height="90" src="'.$youtubeThumbPath.'" frameborder="0"></iframe>';

                }


                echo $img_content."</a>";

                 ?>

            </div>

            <?php

            //echo $list[$i]['icon_reply']." ";

            echo "<a href=\"".$list[$i]['href']."\" class=\"ellipsis\">";

echo "";

            if ($list[$i]['is_notice'])

                echo "<p align='center'><strong>".$list[$i]['subject']."</strong></p>";

            else

                echo "<p align='center'>".$list[$i]['subject']."</p>";

            echo "</a>";

             ?>

        </li>

    <?php }  ?>

    <?php if (count($list) == 0) { //게시물이 없을 때  ?>

    <li>게시물이 없습니다.</li>

    <?php }  ?>

    </ul>

    </div>

</div>

<!-- } <?php echo $bo_subject; ?> 최신글 끝 -->











이거구 style.css는




@charset "utf-8";

/* SIR 지운아빠 */


/* 새글 스킨 (latest) */

.skinmall {

    margin-bottom: 20px;

    background-color: #fff;

}

.skinmall-heading {

display:block;padding:10px 0 8px

}

.skinmall-default>.skinmall-heading {

    color: #333;

    background-color: #fff;

    border-color: #f5f5f5;

}

.skinmall-default>.skinmall-heading a {

    display: inline-block;

    border-bottom: 3px solid #333;

    padding: 3px 15px 3px 0;

    margin-bottom: -3px;

    color: #000;

    font-weight: bold;

}

.skinmall-body {

    padding: 5px 0;

}

.skinmall-body ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

.skinmall-body li {

    margin: 0;

    padding: 0;

}

.skinmall-body li .thumb {

    display: inline-block;

    width: 120;

    margin: 0;

    border: 1px solid #ededed;

}

.skinmall-body li .thumb img {

    display: -webkit-box;

    max-width: 90%;

    height: auto;

    margin: 5% auto;

}

.skinmall-body li .thumb iframe {

    display: inline-block;

    width: 120;

    height: 90;

    margin: 0;


}

.skinmall-body li a {

    color: #333;

    font-size: 0.95em;

    width: 90%;

    margin: 0 auto;

}

.lt_pc {float:left;margin-left:20px}

.lt {position:relative;float:left;margin-bottom:20px;padding-bottom:10px;width:300px;height:450px;border-bottom:1px solid #e9e9e9}

.lt strong {border:1px solid #ddd;}

.lt ul {padding:10px;margin:0 0 10px;list-style:none}

.lt li {padding:3px 0}

.lt .lt_title {display:block;padding:10px 0 8px}

.lt .lt_title > a {margin-left:10px;}

.lt .lt_more {position:absolute;top:10px;right:10px}

.lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}


이거입니다!

이 질문에 댓글 쓰기 :

답변 6

안녕하세요. 인아이디어입니다.


css 만으로도 처리가능합니다.



.sh_latest_post dd.caption {
	padding: 10px 0 15px;
	font-size: 1.4em;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 80%;
}


.sh_latest_post dd.caption 의 css 를 변경해주시면 됩니다. 

단 글자가 길면 ... 으로 처리됩니다.


제가 질문을 제대로 이해한건지 모르겠네요 :(

그리고
그 제목 타이틀에 적용하신 부트스트랩 클래스 2개중 하나를 빼보세요
li 태그에 있는 col-sm-3 이었나 했던것만 놔두시고

아뇨 3번만 말하는게 아니라 다 그런데 예를들어 말씀드린겁니당ㅠㅠ

그룹 자체를 다 줄여봐도 변함이 없습니다ㅠㅠ

1cc6269bec3321d75275d9578fe7f017_1507822461_2197.png
 

답변 감사합니다ㅠ변환했는데도 그대로입니다

f12눌러서 확인해보면 저런식으로 제목 자체가 너무 길어서 그런 것 같습니다ㅠ

해결법 있을까요??


.lt {position:relative;float:left;margin-bottom:20px;padding-bottom:10px;width:300px;height:450px;border-bottom:1px solid #e9e9e9} 
//위와 같은것을


//아래와같이 변경해보세요
.lt {position:relative;float:left;margin-bottom:20px;padding-bottom:10px;width:150px;height:450px;border-bottom:1px solid #e9e9e9} 



틀 자체가 커서 그런경우로 보입니다.


답변을 작성하시기 전에 로그인 해주세요.
전체 123,129 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT