html语言中table表格内怎么换行

周边任选+年卡加赠!下单送Coding Plan 卫衣/双肩包/T恤/羽绒服任选,赠CSDN会员年卡+Coding Plan,学习装备一起拿下! 阅读详情
 
<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

 

HTML

{ table-layout : sLayout }

Scripting

object.style.tableLayout [ = sLayout ]


可能的值:

 

sLayout

String 设置或获取下面的值:

auto

缺省设置. 列宽将设置为不可分割的最大的内容的宽度。

fixed

表的宽度和列的宽度固定,不随单元格中内容而改变

一.     设置了各个列的宽,没有设表的宽:表的宽度等于各个列的宽度的和

二.     设置了表的宽度,没有设各个列的宽度:各个列的宽度平均分配

三.     要是都没设置宽度:表的宽度为100%,各个列的宽度平均分配

 

二.     换行问题

<td>有个attribute NOWRAP,可以控制每个单元格是否允许换行

 

<TD nowrap=true>

或者

this.noWrap = true

 

HTML

<ELEMENT NOWRAP ... >

Scripting

object.noWrap [ = bWrap ]

可能的值:

bWrap

Boolean 设置或获取一个下面的值:.

false

缺省值. 允许单元格的单词字符回行.

true

不允许单元格回行,除非字符中含有”<br>”

 

Asp.netDataGrid有个问题,它的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[n].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设置或获取一个下面的值:

normal

缺省值. 允许从每个词处回行。

break-all

不管在什么位置,超过列宽时就回行。

keep-all

不允许 Chinese, Japanese, Korean 回行。这个功能类似与“normal” 的非亚洲语言版本。

 
 
 
前端html小技巧—table表标签与换行解析 今天分享下”前端html小技巧—table表标签与换行解析“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 何为tabletableHtml表格也是数据的载体。 以下是一个比较标准的table代码写法: XML/HTML Code复制内容到剪贴板 <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> & 阅读详情

相关推荐

html table自动换行,HTMLtable表格标签的换行问题

我们在做web页面的时候,有可能会用到table,这个页面主要是供手机端调用查看列表的,但是我们在使用的时候发现其不支持换行,那么我们应该怎么办呢?现在就去看看HTMLtable表格标签的换行问题吧。何为tabletableHtml表格也,数据之载体。下面是一个比较标准的table代码写法:XML/HTML Code复制内容到剪贴板MonthDateAUG18简单的HTML表格table元...

weixin_39910963的博客 4317

表格Table换行问题解决

表格遇到中文会自动换行,遇到字母或数字就不能自动换行了,网上找了方法记录下 解决办法: 第一: table 加上css:table-layout:fixed;(此css属性 表示 列宽由表格宽度和列宽度设定。不会因为内容而改变设定的宽高,而是会自适应外面的容器)。 第二: td 加上css:word-wrap:break-word;(此css属性表示 在长单词或 URL 地址内...

飞翔的学习笔记 2180

html元素自动换行设置

html自动换行

qq_25775675的博客 2万+

table里边实现文字换行效果

代码 方法1、用css处理 // 注意,这个代码会影响到框架Table组件的样式,建议写给目标table加个class .table{ table-layout: fixed; } .table td{ word-wrap: break-word; } 方法2、html 内联样式 <table style="table-layout: fixed;"> &lt...

qq_36990322的博客 1494

HTML语言表格怎么弄,html语言table表格内怎么换行

标签 或者是都可以CSS控制Table单元格强制换行与强制不换行我们知道Div的换行和不换行css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?用CSS实现Table单元格数据自动换行或不换行的实现方法:1、强制换行:.AutoNewline{Word-break: break-all...

weixin_28909503的博客 1127

html语言table表格换行

&lt;p&gt;标签 或者是&lt;br/&gt;都可以 CSS控制Table单元格强制换行与强制不换行   我们知道Div的换行和不换行css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。   近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?   用CSS实现Table单元格数据自动换行或不换行的实现方法:   1、强制换行: ...

John_Kong19的专栏 1844

表格自动换行,避免撑开

<br />在td中增加:<br />style="table-layout:fixed;word-break:break-all; word-wrap: break-word"<br /><br /><br />语法: <br /><br />word-break : normal | break-all | keep-all <br /><br />参数: <br /><br />normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 <br />break-all :  该行为与亚洲语

钢 的专栏 678

html

html 一. 概述 html:hypertext markup language超文本标记语言 超:可以在记事本中嵌入图片、音频、视频、连接、css、js文件等资源 标记:也叫标签,表示html内容都是以标记的形式展现的 单标记:只有开始标记,没有结束标记 双标记:由开始标记和结束标记组成 属性都是写在开始标记中 作用:制作静态页面 特点: 1、由浏览器解释运行 2、由标记组成 3、后缀是...

weixin_45429835的博客 234

前端(html)

html是一个网页文件就比如把一个文件改为html那么这个文件就会变成网页 html是一个超文本语言: 文本:就是可以在里面输入数字, 字符 ,汉字 超文本: b

weixin_58276266的博客 207

走进HTML的世界

type:输入框种类---button(搭配JS使用),radio(单选框),checkbox(多选框),text(文本框),image,password(密码框),submet(提交)会出现按钮 等等。width/height: 控制宽度高度.高度和宽度⼀般改⼀个,另外⼀个会等比例缩放. 否则就会图⽚失。href:里面填写要跳转网页的url,也可以跳转内部网页,填写相对路径即可,放入#就是空链接不进行跳转。name:给input标签标明谁和谁是一起的(实现单选要用相同的name来标记)

m0_73254011的博客 957

HTML基础

明确了 HTML 是网页结构标记语言,掌握了标准页面结构学会了标题、段落、链接、图片、列表、表格、表单等常用标签了解了标签分类、注释写法和基础开发规范能通过实战代码快速搭建简单网页。

2403_88002105的博客 325

第一次网页前端培训笔记

1.编译器 HBlider 2.HTML HTML的全称为超文本语言 (可以包括非文字元素如:图片、音乐、链接等) 是一种标记语言 它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的网络资源连接为一个逻辑整体。 3.1标签 (1)单标签 没有属性的单标签如<br/>换行 有属性的单标签如<hr/>横线可以设置横线的宽度和长度 (2)双标签 没有属性的如<title>…<title>(页面的名字) 有属性的如<bod

m0_66470321的博客 776

表格换行的样式

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33817333的博客 100

解决html不能自动换行问题

html中控制自动换行 其实只要在表格控制中添加一句 td style="word-break:break-all">就搞定了   word-break : normal | break-all | keep-all   参数:   normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-

king6065的专栏 2111

html table tr td br 什么意思

代表表格 代表表格中的一行 代表表格中的一列 'TR’与’TD’交成一个单元格 ...之间有多少个,就有多少行 ...之间有多少个,就有多少列 table&gt; 单元格1 单元格2 单元格3 单元格4 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 和有什么区别? 上例可能是到目前为止你见过的最复杂的HTML例子,现在让我们来逐一解释其中的各个标签的含义: 用于创建...

qq_42433299的博客 1260

001--Javaweb之HTML入门

1.1.HTML基础 1.HTML概述: ​ HTML: Hyper Text Markup Language 超文本标记语言; 超文本: 比普通文本功能更加强大,可以添加各种样式; 标记语言: 通过一组标签.来对内容进行描述. &amp;amp;lt;关键字&amp;amp;gt; , 是由浏览器来解释执行。 2.常用标签: p:段落标签; . ​ br:换行标签; . ​ h1-h6:标...

qq_36914723的博客 239

网安学习3--Web基础1 HTML

h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3>

2401_83397397的博客 210
上一篇: js 用substring截取字符串 去掉字符串后面n个字符的方法
下一篇: sqlserver 连接oracle 配置详解
derek
博客等级 码龄17年 208粉丝 296原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值