게시판을 만들고있는데 최신게시물에 보이는 제목 크기가 너무 깁니다
본문
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 를 변경해주시면 됩니다.
단 글자가 길면 ... 으로 처리됩니다.
제가 질문을 제대로 이해한건지 모르겠네요 :(
.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}
틀 자체가 커서 그런경우로 보입니다.
답변 감사합니다ㅠ변환했는데도 그대로입니다
f12눌러서 확인해보면 저런식으로 제목 자체가 너무 길어서 그런 것 같습니다ㅠ
해결법 있을까요??
아뇨 3번만 말하는게 아니라 다 그런데 예를들어 말씀드린겁니당ㅠㅠ
그룹 자체를 다 줄여봐도 변함이 없습니다ㅠㅠ
맞습니다 유튜브영상과 우측 게시물 사이 폭을 좁히고 싶어서 줄이려고 하는겁니다ㅠㅠ
그 제목 타이틀에 적용하신 부트스트랩 클래스 2개중 하나를 빼보세요
li 태그에 있는 col-sm-3 이었나 했던것만 놔두시고