text-overflow 글자 절삭, 글자 자르기



프리랜서 웹디자이너 RELATION RELATION.CO.KR

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>



이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 325
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 3651
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 2948
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6060
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4628
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5093
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3367
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 21871
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2431
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 325
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 144
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 350
225 [소스] Window.scroll() 꿘쓰 2020.06.22 280
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 274
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 343
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 681
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 561
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 741
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 882
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 820
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1105
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1