让文字自动适应表格宽度(CSS)

来源：互联网发布：scala编程 pdf 编辑：程序博客网时间：2024/05/01 22:34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

.auto_arrange{ table-layout:fixed }

.auto_arrange td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}

</style>

</HEAD>

<BODY>

<tr>

<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>

</tr>

<tr>

<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>

</tr>

<tr>

<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>

</tr>

<tr>

<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>

</tr>

</table>

</BODY>

</HTML>

以上的例子是用样式实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号.

关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)