프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] text-overflow 글자 절삭, 글자 자르기

2017.04.19
북마크 작성자 정보
text-overflow
글자 절삭, 글자 자르기


width 값이 고정일경우
overflow:hidden; text-overflow:ellipsis;white-space:nowrap; 속성도 꼭 필요함


예제
<style>
.main_middle
{
margin:30px auto;
width:100%;
max-width:1080px;
}

.main_middle_left
{
display:inline-block;
width:48%;
margin-right:2%;
}

.main_middle_left ul
{
padding-top:10px;
}

.main_middle_left li
{
display:block; font-size:13px;
padding:4px 0 4px 0;
line-height:23px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#e1e1e1;
}

.main_middle_left li .ls
{
display:inline-block;
width:420px;
overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;
/*background-color:#CCC;*/
padding-left:10px;
}

.main_middle_left li .ls_date
{
float:right;
}

.main_middle .tit_left
{
height:35px;
font-width:bold;
font-size:18px;
border-bottom-style:solid;
border-bottom_color:color:#ee4f89;
border-bottom-width:2px;
}

.main_middle .tit_left span
{
float:right
}
</style>



<div class="main_middle_left">
<div class="tit_left font_basic_color">NOTICE <a href="news.php?act=2"><span>more+</span></a></div>
<ul>

<a href='#'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2020-02-04 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=40'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2020-01-03 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=38'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2019-12-31 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=37'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2019-12-30 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=35'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2019-12-24 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=34'>
<li><span class='ls'>배우 홍길동 생일선물 관련하여 공지합니다. </span><span class='ls_date'>2019-12-13 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=32'>
<li><span class='ls'>2020 HONG GIL DONG [COME WITH ME] FAN MEETING IN MANILA 공연안내 </span><span class='ls_date'>2019-12-09 &nbsp;</span></li>
</a>

<a href='news.php?act=2&no=31'>
<li><span class='ls'>2020 HONG GIL DONG [COME WITH ME] FAN MEETING IN MACAU 공연안내 </span><span class='ls_date'>2019-12-09 &nbsp;</span></li>
</a>
</ul>
</div>



이 포스트 공유하기

전체목록