유동적인 Width 에서 글자(최신글 등) 쉽게 자르기 > 그누보드5 팁자료실

그누보드5 팁자료실

유동적인 Width 에서 글자(최신글 등) 쉽게 자르기 정보

유동적인 Width 에서 글자(최신글 등) 쉽게 자르기

첨부파일

test.html (471byte) 27회 다운로드 2019-08-30 15:25:53

본문

아시는분들 많으시겠지만, 모르시는 분들을 위해서..

text-overflow: ellipsis 를 활용한 글자 자르기.

 

모바일 버전이나 반응형 등을 작업할때

최근게시물 등의 글자를 잘라야되는데 Width가 100% 이거나 유동적일때

고정되어 잘린 글자수를 보고 난감한 경우가 옵니다. 분명히

 

이럴때 간단하게 CSS로 가로폭에 맞추어서 잘라줄 수 있습니다.

width 가 변하더라도 맞춰서 잘라주니 편합니다!

 

1754226440_1567146070.9694.png

 

위 스샷은 완성했던 참고용 캡쳐이고,

아래 코딩내용을 파일로 첨부했습니다.

 

 

아래와 같은 코딩이라 가정.


<div class="news">
    <li>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</li>
    <li>한상혁·이정옥 후보자 청문회…가짜뉴스·갭투자 쟁점</li>
    <li>Hong Kong Arrests Activists Ahead of Sensitive Anniversary</li>
</div>

 

스타일을 줍니다.


<style>
.news {width:100%}
.news li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 90%;
  display: block;
}
</style>

 

끝. 참 쉽죠...

 

text-overflow: ellipsis; 이놈이 핵심이고,

display: block; 은 width 지정이 안되는게 있을때 넣어주시면 됩니다.

width 가 100% 인 <div> 안에 <li> 의 width를 90% 로 잡아주어

유동적으로 이쁘게 잘 잘립니다.

 

감사합니다.

추천
6

댓글 13개

안녕하세요, 좋은 팁 감사드려요
근데 일반 게시판 제목에다가 css 설정하니 제 테스트로는 제목이 테이블을 아예 밀고 나가서 너비를 더 벌려버리더라고요ㅠㅠ
이건 기본 text-overflow:ellipsis; overflow:hidden; white-space:nowrap 만 적용했을 때에도 마찬가지 현상이었습니다ㅠ

<div class="bo_tit" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;">

이렇게 설정했구요, 해당 스킨 css.는 제가 올린 질문에 올라가 있습니다

왜 이렇게 되는 걸까요? ㅠㅠ

https://sir.kr/qa/321292?page=1&posting=ok&page=1
말씀 주신대로
<div class="bo_tit" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;">
제목테스트 제목테스트 제목테스트 제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트
</div>

이렇게했을때는 정상이니 저 div를 감싸고있는부분이나
다른 css와 겹치는부분은 없는지 체크해보셔야 될거같네요.
아, 그래서 아예 해당 스킨 style.css 파일에

.bo_tit {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;}

이렇게도 넣어봤는데

이 상태에서도 다른 css와 겹칠 수 있는건가요?
페이지 주소 알려주시면 봐드릴께요
공개 어려우시면 쪽지로 주셔요

뭔가 다른 요인 때문에 안되는거는 맞는데 코드를 봐야 알것같습니다~
재인코딩은 까막눈이라 아무래도 바로 하긴 너무 어려운것같고요
대신 다음 방법은 찾았습니다

            <td class="td_subject">
            <span style="white-space: nowrap">
            <span class="text-overflow-dynamic-container">
            <span class="text-overflow-dynamic-ellipsis">
제목제목제목제목제목
                </span>
                </span>
댓글수
</td>

제목 뒤에 댓글이 바로 붙어 나오라고 이렇게 넣으니 span 뒤에 왜 댓글수는 줄바꿈이 되어 나올까요ㅠㅠ
css 처리될 때에 뭔가 문제가 있는 모양인데...
다음과 같습니다

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:90%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

이제 댓글만 정상적으로 나오면 거의 완성일 것 같습니다 ㅠㅠ
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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