[HTML/CSS] 텍스트 줄임말(...) 처리 - ellipsis

/**

 *     Browser :: IE9+, Chrome, Safari, Firefox, Opera

 *     Desc :: text ellipsis 처리

 **/

텍스트의 경우

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

테이블의 경우
텍스트가 길어지면 세가지 현상이 나타나는데,

1. 테이블 길이가 텍스트 길이에 맞춰진다.

2. 텍스트가 줄바꿈 되면서 테이블의 세로 길이가 늘어난다.

3. 텍스트가 테이블 크기를 뚫고 나간다.

<table>에는 "table-layout: fixed",
<td>에는 "white-space:nowrap;  text-overflow:ellipsis; overflow:hidden;"

HTML

<table class="table_box">
	<colgroup><col width="15%">
		<col width="25%">
		<col width="20%">
		<col width="20%">
		<col width="20%">
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>등록일</th>
			<th>조회수</th>
		</tr>
	</thead>
	<tbody>
		<tr style="cursor: pointer;">
			<td>1111111111</td>
			<td style="text-align: left; padding-left:12px;">제목입니다.</td>
			<td style="width: 54px;">이름입니다</td>
			<td style="width: 45px;">등록일입니다.</td>
			<td>조회수입니다.</td>
		</tr>
	</tbody>
</table>

CSS

 
.table_box{width:400px; table-layout:fixed}
.table_box th{text-align: center; color:white; background-color:#7BA072}
.table_box td {
	color: #5A5A5A;
	padding: 6px;
	height: 15px;
        box-sizing: border-box;
	text-overflow:ellipsis;
	overflow:hidden;
        white-space:nowrap;
}

Result

번호	제목	작성자	등록일	조회수
1111111111	제목입니다.	이름입니다	등록일입니다.	조회수입니다.

/**

 *    궁금한 점은 댓글로 남겨주세요.

 *   Please fell free to ask me any questions.

 **/