반응형 게시판 제목 1줄 자동 말줄임표로 자르기 작업중 질문입니다 ㅠㅠ

반응형 게시판 제목 1줄 자동 말줄임표로 자르기 작업중 질문입니다 ㅠㅠ

QA

반응형 게시판 제목 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로 설정한 것과 마찬가지로 제목셀이 글자 길이에 따라서 오른쪽으로 쭉 확장되더라고요,

해결 안된다고 같은 질문만 계속 반복해서 올리는 것도 민폐이고, 이번 문제가 해결되지 않으면 필요한 게시판에만 임시방편을 찾아서 이용하고 나머지는 일반 스킨으로 사용해야겠습니다 ^^;

노출되는 화면을 캡쳐해서 올려주시면 답변하기 더 수월할 것으로 보이네요 ㅎㅎ

이런 방법도 있습니다.

참고만 해 보세요.

 

<?php if(!is_mobile()) { ?>
<?php echo conv_subject($list[$i]['subject'], 100, '…'); ?>
<?php }else{ ?>
<?php echo conv_subject($list[$i]['subject'], 50, '…'); ?>
<?php } ?>

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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