Atomic Habits

테이블 내 긴 문자열에 대한 생략기호(...) 적용 본문

IT/HTML-CSS

테이블 내 긴 문자열에 대한 생략기호(...) 적용

체계성 2022. 7. 14. 10:25

https://pmingdiary.tistory.com/39

 

긴 문자열에 대한 생략기호(...) 적용

테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.(물론 이렇게 나와도 상관없다면 별문제 없겠지만...) 이런경우 보통은 한줄에 나

pmingdiary.tistory.com

 

CSS에서 생략기호 처리를 하는 부분은 'text-over-cut' 으로 선언한 부분이다. 자세히 보면...

display: block; 박스 표시 방식은 block
width: 350px; 박스의 넓이를 반드시 지정
white-space: nowrap; 개행을 하지 않도록 설정
overflow: hidden; 박스에서 벗어나는 부분은 숨김
text-overflow: ellipsis; 박스에서 벗어나는 경우 생략기호 처리

 

 

주의할 것은 적용하는 박스의 넓이가 반드시 특정되어야 적용된다. width가 %로 되어있는 경우 스크립트에서 width값를 알아내어 해당 값으로 다시 세팅 하면 된다.

 

text가 div가 아닌 td 에 바로 존재한다면 - width 대신 max-width 를 사용해야만 한다.

td {
  width:150px
  max-width:150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
     color: blue;
    //word-break: break-word;
    //max-width: 150px !important;
}

 

아래 예제는 text가 td 아래 div 에 존재할 경우.

<html>
<head>

<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<style>
table {
  width: 500px;
  border-collapse: collapse;
}
 
.td1 {
  border: 1px solid #dddddd;
  padding: 5px;
  width: 150px;
}
 
.td2 {
  border: 1px solid #dddddd;
  padding: 5px;
  width: 350px;
}
 
.text-over-cut {
  display: block;
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
</style>

<script type="text/javascript">
  $(document).ready(function(){ 

  });

</script>

</head>
<body>
  <h5>hi</h5>


  <table>
    <tbody>
      <tr>
        <td class="td1">생략기호 미적용</td>
        <td class="td2">
          테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.
        </td>
      </tr>
      <tr>
        <td class="td1">생략기호 적용</td>
        <td class="td2">
          <div class="text-over-cut">
            테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.
          </div>
        </td>
      </tr>
    </tbody>
  </table>

</body>
</html>

 

'IT > HTML-CSS' 카테고리의 다른 글

[HTML] table td % 비율에 관하여  (1) 2022.07.12
[CSS] inherit, initial 이란?  (0) 2022.07.12
<Input> 요소의 클릭 유효 범위 확장 - <lable for="id">  (0) 2022.05.29
addEventListener 함수 ‘false’ / 버블링 / 캡쳐링 / 이벤트 위임  (0) 2022.05.29
fetch사용시 유의 사항 (json() 함수 사용하기)  (0) 2022.05.25
'IT/HTML-CSS' Related Articles more
Comments