반응형 게시판 제목 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>
상세한 답변 정말 감사드립니다
한꺼번에 적용해보니 좀 이상해져서 일단 하나씩 테스트중입니다 ^^
position 속성을 지우면 아예 이상하게 되어버립니다 ㅠㅠ
컨테이너 css 에 display: flex; 도 필요없다고 해서 지우고 넣은건데
그러니까 익스플로러에서 글이 깨져버리고요;;
제목과 함께 댓글 숫자에 .text-overflow-dynamic-container 만 적용되도록 /span 사이에 끼워봤는데
기존 제목이랑 겹쳐져 버리는 현상이 나타나는것을 보니
.text-overflow-dynamic-ellipsis 아래 속성에서 의도적으로 줄바꿈을 시킨거네요 ㅠㅠ
혹시 댓글 부분은 오른쪽으로도 밀려도 테이블 끝에서 넘어가지 않도록 할 수 있는 방법이 있는지 다시 질문해봐야겠습니다,
도움 많이 되었습니다. 감사드려요!
플렉스가 생각보다 다루기가 까다롭습니다. 플렉스를 지우고 맨바닥에서 해보세요.
그리고 포지션 속성은 이유가 있어서 넣었겟지만. 없는 편이 더 좋을 것 같네요.
나름의 힌트라면
td 안에 div 로 영역을 확보하고 거기서부터 해보세요.
펫시님 답변 감사드려요!
제가 이런 소스 짤만한 실력이 있는게 아니라서..
이 소스 원본글 댓글에 플렉스 넣으면 뭔가 문제가 생길거라는 얘기는 봤었는데 빼고 테스트해보니까 익스플로러에서 글자가 깨져서 안나오고 포지션은 없으면 셀 크기가 엉망이 되더라고요,
그래서 일단 최소한의 영역만 스타일 주어 놓은 상태입니다~
td > div 같은 경우에는... ㅠㅠ
1.
if ($list[$i][is_notice])
echo "<a href='{$list[$i][href]}'><span class='notice_div' style='color:{$list[$i][wr_1]};font-weight:{$list[$i][wr_2]};'><div class = 'ellipsis'>{$list[$i][subject]}</div></span></a>";
else
echo "<a href='{$list[$i][href]}' style='overflow:hidden;color:#000000;'><span style='color:{$list[$i][wr_1]};font-weight:{$list[$i][wr_2]};'><div class = 'ellipsis'>{$list[$i][subject]}</div></span></a>";
?>
2.
<td>
<div class = "ellipsis">
<?php 제목?>
<?php 댓글'?>
</div>
</td?
제가 이해를 잘못하고 제대로 못한 것일 수도 있는데 두가지 다 해봤지만 역시나 그냥 style.css로 설정한 것과 마찬가지로 제목셀이 글자 길이에 따라서 오른쪽으로 쭉 확장되더라고요,
해결 안된다고 같은 질문만 계속 반복해서 올리는 것도 민폐이고, 이번 문제가 해결되지 않으면 필요한 게시판에만 임시방편을 찾아서 이용하고 나머지는 일반 스킨으로 사용해야겠습니다 ^^;
노출되는 화면을 캡쳐해서 올려주시면 답변하기 더 수월할 것으로 보이네요 ㅎㅎ
으악 댓글이 달리니 수정을 못하네요ㅠㅠ
https://i.ibb.co/HgX73dc/image.png
여기에 보면 현재 상황을 보실 수 있습니다
사진에 게시판 목록 분류는 제목 한가지밖에 없구요
이런 방법도 있습니다.
참고만 해 보세요.
<?php if(!is_mobile()) { ?>
<?php echo conv_subject($list[$i]['subject'], 100, '…'); ?>
<?php }else{ ?>
<?php echo conv_subject($list[$i]['subject'], 50, '…'); ?>
<?php } ?>
아 답변 감사드려요
다만 이 방법은 결국 제목이 영어나 한글이냐 특문이냐에 따라서 들쭉날쭉하고
일정하게 잘리지가 않아서요 ㅠㅠ
