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 {
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>