본문으로 바로가기

글자수 길이 제한

category 웹코딩/HTML & CSS 2016. 8. 22. 17:05

게시판 글들을 리스팅할 때 제목은 길이에 맞게 절삭하고, 뒷부분에 '...' 을 붙이는 것이 일반적이다.

PHP 등 개발 코드에서 자르는 경우 데이터 타입(한글/영문/숫자)을 신경 써서 처리하다 보면 제목의 길이가 일정하지 못하고 결과적으로 예쁘게 표시하기 힘들다.


.main_box .main_notice li span.text { display:inline-block; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main_box .main_notice li span.date { float:right; color:#b3b3b3; font-size:11px; *margin-top:-20px}


상황에 따라 display:block 또는 display:inline-block 사용(최근 글 li에 적용하려고 inline-block).

span 태그의 width 이상 긴 문자열은 자동으로 잘리고 '...' 가 붙게된다.



'웹코딩 > HTML & CSS' 카테고리의 다른 글

CSS - opaciy, rgba, filter (투명도 조절 _ IE8)  (0) 2016.09.05
글자수 길이 제한  (0) 2016.08.22

댓글을 달아 주세요