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>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	    <li><a href='#'><span class='ls'>배우 홍길동 생일 관련하여 공지합니다.  </span><span class='ls_date'>2020-02-04  </span></a></li>
	</ul>
</div>