유동적인 Width 에서 글자(최신글 등) 쉽게 자르기
아시는분들 많으시겠지만, 모르시는 분들을 위해서..
text-overflow: ellipsis 를 활용한 글자 자르기.
모바일 버전이나 반응형 등을 작업할때
최근게시물 등의 글자를 잘라야되는데 Width가 100% 이거나 유동적일때
고정되어 잘린 글자수를 보고 난감한 경우가 옵니다. 분명히
이럴때 간단하게 CSS로 가로폭에 맞추어서 잘라줄 수 있습니다.
width 가 변하더라도 맞춰서 잘라주니 편합니다!

위 스샷은 완성했던 참고용 캡쳐이고,
아래 코딩내용을 파일로 첨부했습니다.
아래와 같은 코딩이라 가정.
[code]
<div class="news">
<li>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</li>
<li>한상혁·이정옥 후보자 청문회…가짜뉴스·갭투자 쟁점</li>
<li>Hong Kong Arrests Activists Ahead of Sensitive Anniversary</li>
</div>
[/code]
스타일을 줍니다.
[code]
<style>
.news {width:100%}
.news li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
display: block;
}
</style>
[/code]
끝. 참 쉽죠...
text-overflow: ellipsis; 이놈이 핵심이고,
display: block; 은 width 지정이 안되는게 있을때 넣어주시면 됩니다.
width 가 100% 인 <div> 안에 <li> 의 width를 90% 로 잡아주어
유동적으로 이쁘게 잘 잘립니다.
감사합니다.
댓글 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와 겹치는부분은 없는지 체크해보셔야 될거같네요.
.bo_tit {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;}
이렇게도 넣어봤는데
이 상태에서도 다른 css와 겹칠 수 있는건가요?
공개 어려우시면 쪽지로 주셔요
뭔가 다른 요인 때문에 안되는거는 맞는데 코드를 봐야 알것같습니다~
쪽지로 url 남겨 드렸어요!
대신 다음 방법은 찾았습니다
<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;
}
이제 댓글만 정상적으로 나오면 거의 완성일 것 같습니다 ㅠㅠ
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2695 | 1개월 전 | 171 | ||
| 2694 | 1개월 전 | 134 | ||
| 2693 | 1개월 전 | 143 | ||
| 2692 | 1개월 전 | 158 | ||
| 2691 | 1개월 전 | 312 | ||
| 2690 | 1개월 전 | 217 | ||
| 2689 |
|
1개월 전 | 424 | |
| 2688 | 1개월 전 | 275 | ||
| 2687 |
선택과집중
|
1개월 전 | 313 | |
| 2686 | 1개월 전 | 275 | ||
| 2685 | 1개월 전 | 330 | ||
| 2684 | 2개월 전 | 462 | ||
| 2683 | 2개월 전 | 261 | ||
| 2682 | 2개월 전 | 287 | ||
| 2681 |
선택과집중
|
2개월 전 | 264 | |
| 2680 | 2개월 전 | 313 | ||
| 2679 |
|
2개월 전 | 417 | |
| 2678 |
|
2개월 전 | 487 | |
| 2677 | 2개월 전 | 312 | ||
| 2676 | 2개월 전 | 287 | ||
| 2675 |
선택과집중
|
2개월 전 | 464 | |
| 2674 |
|
2개월 전 | 309 | |
| 2673 | 2개월 전 | 322 | ||
| 2672 | 2개월 전 | 272 | ||
| 2671 | 2개월 전 | 244 | ||
| 2670 | 2개월 전 | 356 | ||
| 2669 | 2개월 전 | 274 | ||
| 2668 |
선택과집중
|
2개월 전 | 470 | |
| 2667 |
선택과집중
|
2개월 전 | 455 | |
| 2666 |
선택과집중
|
3개월 전 | 388 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기