반응형 게시판 제목 1줄 자동 말줄임표로 자르기 작업중 질문입니다 ㅠㅠ
본문
<table> 에는 오버플로가 잘 안먹는다고 합니다
그래서 지금 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>
로 80%는 성공을 했습니다...
근데!! span 인데도 불구하고 댓글 수가 줄바꿈이 되어 나오네요 ㅠㅠㅠㅠ
-----------------------------------------게
제목제목제목제목제목제목 시
+(댓글수) 파
---------------------------------------제목셀
이런 식으로요..
css에서 무슨 짓거리를 한 것 같은데 잘 모르겠습니다 ㅠㅠ
댓글수
</span>
위치는 전자 후자 아무 상관 없으니 어쨌든간
강제적으로 댓글 수를 말줄임표 바로 뒤에 붙게 할 수 있는 방법은 없을까요?
답변 3
td 태그에 패딩도 있을 것이고
필요없는 position 속성을 쓴것 같네요.
td 는 편의상 div 로 바껐어요.
<style>
.text-overflow-dynamic-container {
/* 삭제 position: relative; */
max-width: 100%;
padding: 0 !important;
display: -webkit-flex;
display: -moz-flex;
vertical-align: text-bottom !important;
/* 추가 레이아웃 확인용 */
outline: 4px dashed blue;
}
.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;
min-width: 0;
max-width: 100%; /* 이것과 아래가 양립 가능한가요? */
width:90%;
/* 수정 */
width:90%;
max-width: 170px;
/* 삭제 top: 0;
left: 0; */
/* 추가 레이아웃 확인용 */
outline: 2px dashed pink;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
content: '-';
display: inline;
visibility: hidden;
width: 0;
}
</style>
<div class="td_subject" style="white-space: nowrap; padding:0" style="width:200px; outline:8px dashed yellow;">
<!-- <span style="white-space: nowrap"> 없애거나 td 의 스타일로 바꾸세요 혹은 태그를 닫아주거나 -->
<span class="text-overflow-dynamic-container">
<span class="text-overflow-dynamic-ellipsis">
제목제목제목제목제목
</span>
댓글수
</span>
</div>
노출되는 화면을 캡쳐해서 올려주시면 답변하기 더 수월할 것으로 보이네요 ㅎㅎ
이런 방법도 있습니다.
참고만 해 보세요.
<?php if(!is_mobile()) { ?>
<?php echo conv_subject($list[$i]['subject'], 100, '…'); ?>
<?php }else{ ?>
<?php echo conv_subject($list[$i]['subject'], 50, '…'); ?>
<?php } ?>