TIP게시판

제목 CSS 스타일 게시물 글자 자르기
글쓴이 kaido 작성시각 2014/11/06 13:55:15
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 14861   RSS
부제. 아직도 함수를 써서 글자를 짜르고 계신가요?

거창해 보입니다만... 적용 방법은 매우 이지~! 합니다.


흔히 게시물 리스트의 글자를 자를 경우에

substr(); 등의 함수를 이용합니다.

utf8 기준의 글자 자르기는 mb_substr(); 를 이용하고요.


하지만 글자의 길이는 제각각입니다.

aaa
AAA
아아아
亞亞亞
123

보시면 아시겠지만 길이가 다릅니다. 글자 바이트 단위로 짤라도 오버 되거나 적게 잘리는 경우가 많습니다.

그런고로... 아주 깔끔하게 그리고 쉽게 자르는 방법! 함수를 쓰지 않는 팁을 알려드립니다.
  

 <div style='width:270px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis;'>문자열</div>
 

끝.
width 길이만큼 짤라 내며, 마지막엔 ... 이 붙습니다.
포럼에 글이 이상하게 짤려있길래 한번 적어봅니다 ^^;


 
 다음글 csrf 설정 시 CKEditor 이미지 업로드 (2)
 이전글 sub 페이지 쉽게 넣기 (5)
목록

댓글

한대승(불의회상) / 2014/11/06 18:56:19 / 추천 0
좋은 정보 감사 합니다. ^^
하늘치 / 2015/01/17 22:02:56 / 추천 0
저는 클래스를 따로 만들어서 쓰고 있습니다.
  
.ellipsis{
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis
}
혈풍 / 2015/01/20 09:16:29 / 추천 0
단점은 CSS3 라는 점인 것 같습니다.
IE 낮은 버전을 아직도 많이 쓰는 우리나라 때문에 슬픕니다.