말줄임처리 css

말줄임처리 css

QA

말줄임처리 css

본문

게시판글 본문을 목록에서 요약하여 보여주고싶은데 

어떤글은 2줄로 떨어져서 말줄임되고

어떤글은 1줄에서 말줄임되고 

어떤포인트에서 말줄임이 되는지 모르겠지만 자동으로 처리가 됩니다.

그래서 제가 억지로 일괄 3줄 말줄임처리를 해보려했으나 먹히지가 않습니다,,

본문글을 요약으로 가져오는 개발쪽의 일인가요 ??

아니면 css로 해결 가능한지 고수님들 답변 부탁드립니다.

 

아래 주소 남겨봅니다 ,,

https://creativity.connectvalue.net/contents/fanPage/board/knowhowList.asp?page_str_menu=0

 

이 질문에 댓글 쓰기 :

답변 3

개발단에서 cut_str 로 가져와서 보여주고 있다면.. 말줄임 css 적용이 효과가 없습니다.

 

개발단에서 cut_str 로 가져오는 부분을.. -> 전부 가져오는 것으로 수정후에..

=> 말줄임 css 적용

 

순서로 처리해주면 됩니다.

한줄로 말줄임 하는건


<style>
.ex {text-overflow: ellipsis; white-space: nowrap; word-break: break-all; overflow: hidden;}
</style>

위와 같습니다. 

 

두줄 이상은


<style>
.ex {height: 54px; text-overflow: ellipsis; overflow: hidden; display: block; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
</style>

위와 같습니다. 여기서 height 은 2줄 3줄 4줄 5줄... 이렇게 표현되는 높이에 따라 맞춰주면 되고,

-webkit-line-clamp: 2; 여기 숫자가 줄수 입니다.

익스에선 말줄임 표시가 안되는 단점이 있지만, 유용한 css 입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT