말줄임 테이블 만들기

이창호·2022년 5월 25일
0

테이블의 사이즈는 늘었다 줄었다 하는데, td에 white-space:nowrap 들어 간 순간부터
글자대로 테이블이 늘어나기 때문에 말줄임을 할 수가 없어서 div를 추가하여 작업을 하기로 하였다.

  • HTML
<table>
   <tr>
      <th><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
      <td><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
      <th><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
      <td><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
   </tr>
   <tr>
      <th><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
      <td><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
      <th><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></th>
      <td><div class="txtBox">&nbsp;<p class="txt">말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트 말줄임 테스트</p></div></td>
   </tr>
</table>
  • CSS
.txtBox {
   position: relative;
}
.txt {
   overflow:hidden;
   position:absolute;
   left:0;
   top:0;
   width:100%;
   white-space:nowrap;
   text-overflow:ellipsis
}

필요한 부분은 총 세가지이다.

  1. 텍스트 영역을 감싸고 기준을 잡아 줄 relative를 가진 박스
  2. 영역(높이값)을 잡아줄 공백 혹은 빈 태그 (저는  로 빈 문자열 삽입)
  3. absolute로 부유 한 상태로 텍스트
  • 2번의 빈 영역이 높이값을 잡아주고,
  • 1번의 relative를 가진 박스가 td영역 만큼 늘어나며,
  • 3번의 텍스트가 1번의 박스의 영역대로 늘어나며, 텍스트가 영역보다 길어 질 경우 말줄임처리, 아닐 경우 영역만큼 텍스트가 노출되게 된다.

샘플코드: 링크

profile
조금씩 나아지기

0개의 댓글