[FE/Bootstrap] 테이블의 행이 길어질 때 글 줄이기(...)

화면의 크기에 따라 테이블의 행 내용을 ...으로 줄여보자.

 

HTML

<table class="table" style="table-layout: fixed;">
    <thead>
        <tr>
            <th scope="col" class="col-8">제목</th>
            <th scope="col" class="col-2">작성자</th>
            <th scope="col" class="col-2">작성일</th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        <tr>
            <td class="text-ellipsis">길어지는 제목을 줄여보겠습니다. 여기를 보세요!</td>
            <td>관리자</td>
            <td>2023-07-30</td>
        </tr>
    </tbody>
</table>

• table에 table-layout: fixed; 스타일을 준다.
• 글자를 줄이고자 하는 곳에 class="text-ellipsis"을 추가한다.

 

CSS

.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

 

결과물

---

Ref.

1. stackoverflow / https://stackoverflow.com/questions/22044194/sized-table-with-at-most-one-line-of-content-per-cell-with-bootstrap-3

---

* 잘못된 부분에 대해 댓글 남겨주시면 감사하겠습니다! 😀