cut.html테이블에서 글자 자르기시에 유용한 팁
<html>
<hea
d>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
위와 같은 코드가 있을 경우 글자를 올바르게 자르기 위해서는 테이블의 기본 속성중에 Cell 속성을 사용자의 정의에 따르도록 하기위해
테이블 레이아웃 속성을 fixed로 해준다.
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
가변글자 자르기는 첨부파일 참고
'css관련기록' 카테고리의 다른 글
| mailto 태그 (0) | 2012.04.09 |
|---|---|
| 플래시 폰트 오류 (0) | 2012.04.05 |
| iframe 값 적용 (0) | 2012.04.04 |
