html语言中table表格内怎么换行
2011-12-19 14:02
661 查看
<p>标签 或者是<br/>都可以
CSS控制Table单元格强制换行与强制不换行
我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。
近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?
用CSS实现Table单元格数据自动换行或不换行的实现方法:
1、强制换行:
<style type="text/css">
.AutoNewline
{
Word-break: break-all;/*必须*/
}
</style>
<table>
<tr>
<td class="AutoNewline">自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td>
</tr>
</table>
2、强制不换行:
<style type="text/css">
.NoNewline
{
word-break: keep-all;/*必须*/
}
</style>
<table>
<tr>
<td class="NoNewline">不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</td>
</tr>
</table>
一.
要想固定table的总的宽度和每列的宽度:
<TABLE id="Table1" style="TABLE-LAYOUT:fixed" border="1">
或在脚本中:
this.style.tableLayout = fixed
可能的值:
二.
换行问题
<td>有个attribute
叫 NOWRAP,可以控制每个单元格是否允许换行
<TD nowrap=true>
或者
this.noWrap = true
可能的值:
Asp.net的DataGrid有个问题,它的Column有个属性ItemStyle.Wrap,设计是当这个列的ItemStyle.Wrap属性为true时,单元格允许回行,为false不允许回行,可是当设置了为false时输出到客户端的是这样的:
<td nowrap=”nowrap”>
而不是
<td nowrap=”true”>
所以ItemStyle.Wrap属性是没有起作用的,请自己手工在DataGrid1_ItemDataBound事件中将不允许回行的那些单元增加个Attribute:
nowrap=true。
private
void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
e.Item.Cells
.Attributes.Add("nowrap","
true ") ;
}
三.
截断英文单词强行回行
上面两个方法可以把表格的宽度都固定了,每个单元是否允许回行都可以设定了,现在可能又会碰到一个问题,当允许回行的遇到比较长的英文单词,可能就超出了这个单元格的宽度,要是不把这个单词从中截断强行换行的话,这个单词的超出单元格宽的的部分将不被显示出来。所以需要在单词超出单元格长度的地方把单词强行截断回行。
可以利用css中的word-break
风格来达到我们的目的:
<TABLE id="Table1" style="TABLE-LAYOUT:fixed;word-break:break-all" border="1">
或在脚本中:
this.style. wordBreak = break-all
可能的值:
CSS控制Table单元格强制换行与强制不换行
我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。
近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?
用CSS实现Table单元格数据自动换行或不换行的实现方法:
1、强制换行:
<style type="text/css">
.AutoNewline
{
Word-break: break-all;/*必须*/
}
</style>
<table>
<tr>
<td class="AutoNewline">自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td>
</tr>
</table>
2、强制不换行:
<style type="text/css">
.NoNewline
{
word-break: keep-all;/*必须*/
}
</style>
<table>
<tr>
<td class="NoNewline">不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</td>
</tr>
</table>
一.
要想固定table的总的宽度和每列的宽度:
<TABLE id="Table1" style="TABLE-LAYOUT:fixed" border="1">
或在脚本中:
this.style.tableLayout = fixed
HTML | { table-layout : sLayout } |
Scripting | object.style.tableLayout [ = sLayout ] |
sLayout | String 设置或获取下面的值:
|
换行问题
<td>有个attribute
叫 NOWRAP,可以控制每个单元格是否允许换行
<TD nowrap=true>
或者
this.noWrap = true
HTML | <ELEMENT NOWRAP ... > |
Scripting | object.noWrap [ = bWrap ] |
bWrap | Boolean 设置或获取一个下面的值:.
|
<td nowrap=”nowrap”>
而不是
<td nowrap=”true”>
所以ItemStyle.Wrap属性是没有起作用的,请自己手工在DataGrid1_ItemDataBound事件中将不允许回行的那些单元增加个Attribute:
nowrap=true。
private
void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
e.Item.Cells
.Attributes.Add("nowrap","
true ") ;
}
三.
截断英文单词强行回行
上面两个方法可以把表格的宽度都固定了,每个单元是否允许回行都可以设定了,现在可能又会碰到一个问题,当允许回行的遇到比较长的英文单词,可能就超出了这个单元格的宽度,要是不把这个单词从中截断强行换行的话,这个单词的超出单元格宽的的部分将不被显示出来。所以需要在单词超出单元格长度的地方把单词强行截断回行。
可以利用css中的word-break
风格来达到我们的目的:
<TABLE id="Table1" style="TABLE-LAYOUT:fixed;word-break:break-all" border="1">
或在脚本中:
this.style. wordBreak = break-all
HTML | { word-break : sBreak } |
Scripting | object.style.wordBreak [ = sBreak ] |
sBreak | String设置或获取一个下面的值:
|
相关文章推荐
- 深入解析HTML的table表格标签与相关的换行问题
- HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
- HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
- 如何使HTML中的元素TABLE的表格文字不换行
- 关于html中使用table表格tr不换行的问题
- 强制将在表格中将英文字母换行的CSS样式,加在表格table标签中
- html表格table的表头排序,js代码fastunit使用案例
- 去掉html表格之table间的空隙
- 让HTML 表格中内容自动换行及顶端对齐
- 如何只用HTML画出一个圆角的Table表格?
- 关于table表格 td里内容较多换行的处理方法
- 一个好看的 html css table表格 ,单双行变色
- HTML table表格边框的控制详细说明
- html入门(1)--表格table
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- CSS如何设置html table表格边框样式
- HTML的dl、dt、dd标记制作表格对决Table制作表格
- 【技术贴】在Excel一个小表格里面,如果回车的话就会跳到下一个格,我要换行怎么办啊?
- HTML表格中超长字符串强制换行问题
- html基础 table表格的边框线 单元格的宽度 高度