如何用CSS实现html中table的自动换行

html-css020

如何用CSS实现html中table的自动换行,第1张

HTML里面加了一个样式属性:

word-break: break-all,可以实现表格的自动换行,具体参考代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>table内的td内容不换行</title>

<style type="text/css">

<!--

body{ font-size:12px}

.breakLine{word-break: break-all}

-->

</style>

</head>

<body>

<table width="400">

<tr>

<td width="90" height="30">处理人工号:</td>

<td width="410" class="breakLine">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td>

</tr>

</table>

</body>

</html>

word-break属性简单介绍如下:

语法:word-break : normal | break-all | keep-all

取值:

normal :  默认值。允许在词间换行

break-all :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的 normal 相同。

用CSS让文字在一行内显示不换行的方法:

一般的文字截断(适用于内联与块):

.text-overflow{

display:block             /*内联对象需加*/

width:31em

word-break:keep-all       /* 不换行 */

white-space:nowrap        /* 不换行 */

overflow:hidden           /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis    /*溢出时显示省略标记...;需与overflow:hidden一起使用*/

}

对于表格,定义有点不一样:

table{

width:30em

table-layout:fixed      /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/

}

td{

width:100%

word-break:keep-all     /* 不换行 */

white-space:nowrap      /* 不换行 */

overflow:hidden         /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis  /* 溢出时显示省略标记...;需与overflow:hidden一起使用*/

}

注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

用&NBSP代替,代表英文空格,2个&NBSP连写代表一个中文空格。

\r\n,java开发时支持此写法,纯HTML静态页面不支持。

换行:用<br>...</br>或<br />表示

换段:用<p>...</p>表示

英文空格:用 表示

中文空格:用 表示

当然如果纯文本的话,

可以用padding或margin表示精确距离,也可用text-indent缩进属性表示。