<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#wrapper { width: 453px; margin:0 auto;}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
table-layout: fixed;
}
td {
vertical-align: middle;
padding:5px;
border: 1px solid #000;
overflow:hidden;
white-space : nowrap;
text-overflow: ellipsis;
}
td.textOverDefault {
white-space : normal; /*기본값*/
text-overflow: clip; /*기본값*/
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td width="30%">111111111111111</td><td width="*">방갑습니다. 방갑습니다. 방갑습니다. 방갑습니다. </td>
</tr>
<tr>
<td>11111</td><td>2222 2222</td>
</tr>
<tr>
<td>11111</td><td>2222</td>
</tr>
<tr>
<td>11111</td><td>2222</td>
</tr>
<tr>
<td colspan="2" class="textOverDefault">안녕하세요 안녕하세요안녕하세요 안녕하세요안녕하세요 안녕하세요안녕하세요</td>
</tr>
</table>
</div>
</body>
</html>
자바스크립트 라이브러리 : http://dotdotdot.frebsite.nl/
'CSS' 카테고리의 다른 글
| [CSS] table-cell div 수직 수평 정렬 (0) | 2015.01.28 |
|---|---|
| [CSS] user-select:none 텍스트 드레그 막기 (0) | 2015.01.23 |
| [CSS] 음수 margin을 이용한 div 수직, 수평 정렬 (0) | 2015.01.07 |
| [CSS] position을 이용한 가변레이아웃 (0) | 2015.01.07 |
| [CSS] ::after 가상선택자 배경이미지넣기 (0) | 2015.01.05 |
