유동적인 Width 에서 글자(최신글 등) 쉽게 자르기 정보
유동적인 Width 에서 글자(최신글 등) 쉽게 자르기첨부파일
본문
아시는분들 많으시겠지만, 모르시는 분들을 위해서..
text-overflow: ellipsis 를 활용한 글자 자르기.
모바일 버전이나 반응형 등을 작업할때
최근게시물 등의 글자를 잘라야되는데 Width가 100% 이거나 유동적일때
고정되어 잘린 글자수를 보고 난감한 경우가 옵니다. 분명히
이럴때 간단하게 CSS로 가로폭에 맞추어서 잘라줄 수 있습니다.
width 가 변하더라도 맞춰서 잘라주니 편합니다!
위 스샷은 완성했던 참고용 캡쳐이고,
아래 코딩내용을 파일로 첨부했습니다.
아래와 같은 코딩이라 가정.
<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
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
근데 일반 게시판 제목에다가 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
해당 url 쪽지로 알려주시면 한번 보겠습니다.
말씀 주신대로
<div class="bo_tit" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;">
제목테스트 제목테스트 제목테스트 제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트제목테스트 제목테스트 제목테스트
</div>
이렇게했을때는 정상이니 저 div를 감싸고있는부분이나
다른 css와 겹치는부분은 없는지 체크해보셔야 될거같네요.
<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와 겹칠 수 있는건가요?
.bo_tit {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block;}
이렇게도 넣어봤는데
이 상태에서도 다른 css와 겹칠 수 있는건가요?
페이지 주소 알려주시면 봐드릴께요
공개 어려우시면 쪽지로 주셔요
뭔가 다른 요인 때문에 안되는거는 맞는데 코드를 봐야 알것같습니다~
공개 어려우시면 쪽지로 주셔요
뭔가 다른 요인 때문에 안되는거는 맞는데 코드를 봐야 알것같습니다~
아 감사합니다!
쪽지로 url 남겨 드렸어요!
쪽지로 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;
}
이제 댓글만 정상적으로 나오면 거의 완성일 것 같습니다 ㅠㅠ
대신 다음 방법은 찾았습니다
<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;
}
이제 댓글만 정상적으로 나오면 거의 완성일 것 같습니다 ㅠㅠ
해결 되셨다니 다행입니다 ^^
유용한 정보네요 공개해 주셔서 감사합니다.
감사합니다 ^^
감사합니다^^
감사합니다~!