테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

소울e 6년 전 조회 3,591
답변 3
목록

에는 오버플로가 잘 안먹는다고 합니다

 

그래서 지금 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;  } 

 

이렇게 추가한 뒤에

 

 

 

로 80%는 성공을 했습니다...

 

근데!! span 인데도 불구하고 댓글 수가 줄바꿈이 되어 나오네요 ㅠㅠㅠㅠ

-----------------------------------------게

제목제목제목제목제목제목              시

+(댓글수)                                    파

---------------------------------------제목셀

이런 식으로요..

 

css에서 무슨 짓거리를 한 것 같은데 잘 모르겠습니다 ㅠㅠ

 

댓글수

 

위치는 전자 후자 아무 상관 없으니 어쨌든간

강제적으로 댓글 수를 말줄임표 바로 뒤에 붙게 할 수 있는 방법은 없을까요?  

#css #그누보드5 #php
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
비
비펫3
6년 전

td 태그에 패딩도 있을 것이고

필요없는 position 속성을 쓴것 같네요.

td 는 편의상 div 로 바껐어요.

 

</p>

<p><style>

    .text-overflow-dynamic-container {

        /* 삭제 position: relative; */

        max-width: 100%;

        padding: 0 !important;

        display: -webkit-flex;

        display: -moz-flex;

        vertical-align: text-bottom !important;</p>

<p> </p>

<p>        /* 추가 레이아웃 확인용 */

        outline: 4px dashed blue;

    }</p>

<p>

    .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;</p>

<p> </p>

<p>        min-width: 0;

        max-width: 100%; /* 이것과 아래가 양립 가능한가요? */

        width:90%;</p>

<p> </p>

<p>        /* 수정 */

        width:90%;

        max-width: 170px;</p>

<p> </p>

<p>        /* 삭제 top: 0;

        left: 0; */</p>

<p> </p>

<p>        /* 추가 레이아웃 확인용 */

        outline: 2px dashed pink;

    }</p>

<p>

    .text-overflow-dynamic-container:after,

    .text-overflow-dynamic-ellipsis:after {

        content: '-';

        display: inline;

        visibility: hidden;

        width: 0;

    }

</style></p>

<p> </p>

<p><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></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

�
소울e
6년 전
상세한 답변 정말 감사드립니다

한꺼번에 적용해보니 좀 이상해져서 일단 하나씩 테스트중입니다 ^^
�
소울e
6년 전
position 속성을 지우면 아예 이상하게 되어버립니다 ㅠㅠ
컨테이너 css 에 display: flex; 도 필요없다고 해서 지우고 넣은건데
그러니까 익스플로러에서 글이 깨져버리고요;;

제목과 함께 댓글 숫자에 .text-overflow-dynamic-container 만 적용되도록 /span 사이에 끼워봤는데
기존 제목이랑 겹쳐져 버리는 현상이 나타나는것을 보니
.text-overflow-dynamic-ellipsis 아래 속성에서 의도적으로 줄바꿈을 시킨거네요 ㅠㅠ

혹시 댓글 부분은 오른쪽으로도 밀려도 테이블 끝에서 넘어가지 않도록 할 수 있는 방법이 있는지 다시 질문해봐야겠습니다,

도움 많이 되었습니다. 감사드려요!
�
팻시
6년 전
플렉스가 생각보다 다루기가 까다롭습니다. 플렉스를 지우고 맨바닥에서 해보세요.
그리고 포지션 속성은 이유가 있어서 넣었겟지만. 없는 편이 더 좋을 것 같네요.
나름의 힌트라면
td 안에 div 로 영역을 확보하고 거기서부터 해보세요.
�
소울e
6년 전
펫시님 답변 감사드려요!

제가 이런 소스 짤만한 실력이 있는게 아니라서..
이 소스 원본글 댓글에 플렉스 넣으면 뭔가 문제가 생길거라는 얘기는 봤었는데 빼고 테스트해보니까 익스플로러에서 글자가 깨져서 안나오고 포지션은 없으면 셀 크기가 엉망이 되더라고요,
그래서 일단 최소한의 영역만 스타일 주어 놓은 상태입니다~

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

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

댓글을 작성하려면 로그인이 필요합니다.

조
조민
6년 전

이런 방법도 있습니다.

참고만 해 보세요.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
소울e
6년 전
아 답변 감사드려요
다만 이 방법은 결국 제목이 영어나 한글이냐 특문이냐에 따라서 들쭉날쭉하고
일정하게 잘리지가 않아서요 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

gamja1
gamja1
6년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
소울e
6년 전
으악 댓글이 달리니 수정을 못하네요ㅠㅠ

https://i.ibb.co/HgX73dc/image.png

여기에 보면 현재 상황을 보실 수 있습니다

사진에 게시판 목록 분류는 제목 한가지밖에 없구요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

© 2025 SIRSOFT. All rights reserved.

        제목제목제목제목제목      댓글수