table中td单元格文字不换行的方法

最新推荐文章于 2024-05-21 21:13:29 发布
最新推荐文章于 2024-05-21 21:13:29 发布
阅读量1k 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_12724/article/details/82516071
版权
td 单元格的nowrap属性值按照XHTML为nowrap，但是按照W3C的文档说明，不赞成使用，推荐使用样式代替，那么可以代替的样式是word-break，该css的值有normal（默认值）、break-all、keep-all 3个，但使用时要注意的是，td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用，如果设置了td宽度，则nowrap属性不起作用。 但是实际运用中发现当Html元素有width属性时，用Css也不起作用，

所有要想设置单元格中字体不换行，要去掉html元素的width属性

所以要想让td中的文字不换行，有两种方法
1.在html元素上去掉width属性（如果有的话），加入nowrap="nowrap"属性（不推荐）
2.在html元素上去掉width属性（如果有的话），加入word-break:keep-all css样式
iteye_12724
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS对表格单元格强制换行和不换行
12-29
　用CSS实现Table单元格数据自动换行或不换行的实现方法： 　1、强制换行： <style type=text/css>.AutoNewline{ word-break: break-all;/*必须*/}</style><table><tr> <td class=AutoNewline>自动换行...
Table中td不自动换行
A15937822658的专栏
02-10 6303
有的时候，table因为宽度的问题，会把td中的文字自动换行，造成下图情况 如果td中的字符串长度不会太长，可以使用white-space属性来禁止自动换行。         td         {             white-space: nowrap;         } 这样就不会自动换行了，但是table的整体宽度会超出父容器。
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”...
rainbow702的博客
06-15 1374
之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。 先说一下几个要点： table 的 “table-layout”属性要声明为“fixed” 对表格的第一行中的每个单元格设置宽度。我用的是数值，不是百分比。 对可能出现内容很长的单元格，设置以下三个属性： ...
使table中td的内容不换行显示，多余时出现省略号
S_Chen
07-29 1万+
table中td固定宽度不换行方法： 一、 一、内容
关于td里面内容不换行的解决办法
qq_27791709的博客
12-18 1万+
PageAdmin新版采用了Html5的文档类型声明（即：），会发现只在table中增加强制换行样式style="word-break:break-all;"已经不管用了。 解决办法：增加white-space和word-wrap（如果不用这个，英文或数字长字符串不会强制换行），完整的样式如下： .... 注意，td里面一定要加上宽度限制 这样设置后在火狐和IE下td里面的内容都会在
用CSS实现Table中td强制不换行
cndn20120225的博客
07-24 389
<table> <tr> <td style="word-break: keep-all; ">There are content and it is very long.</td> </tr> </table>
html td nowrap不换行属性使用方法
12-13
nowrap 属性规定表格单元格中的内容不换行。 实例 带有 nowrap 属性的表格单元： 复制代码代码如下:<table border=”1″> <tr> <th>Poem</th> <th>Poem</th> </tr> <tr> <td nowrap=”nowrap”>Never increase, ...
td 内容自动换行 table表格td设置宽度后文字太多自动换行
01-19
复制代码代码如下:<table xss=removed border=”1″ cellspacing=”0″ cellpadding=”0″ width=”200″> <tbody> <tr> <td xss=removed width=”20″>ssssssssssssssssssssssssssssssssssssssssss
table表格某一td内容太多导致样式混乱的解决方案
12-13
样式，但这样表格的宽度问题是解决了，但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美解决。如下图：   这样的确可以很好地解决问题。记录下，以备后用...
CSS强制单元格换行
07-30
<td width="270px" class="newLine"> <label><a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>...
table表格中td里面字数太多，禁止换行，并将超出部分隐藏以...代替
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
04-12 8956
css部分.tables{ width: 100%; height: 100%; table-layout: fixed; } .table_tit{ white-space: nowrap; //禁止td换行 overflow: hidden; //隐藏X,Y滚动条 text-overflow: ellipsis;//将显示不完的以...显示 }html部分&lt;table class="...
控制td里面的内容不换行
景川的博客
10-26 1589
平时做格式处理，td里面内容太多总是会换行导致样式乱掉，今天又遇到，在网上查了一下各种方法，发现这个很有用，分享出来<td style="white-space: nowrap">td里面的内容不换行</td>这样的话td里面的内容是不会换行的，我用的谷歌浏览器，不同的框架下也有可能无效，具体看个人情况吧
使<td>中的内容不换行
itmyhome的专栏
12-01 1万+
表格table中的td单元格中，内容过长会自动换行，但换行后的效果有时很不美观，为了不让其换行，可有如下操作： 在td标签中有nowrap属性 设置其为： 这里的字符串很长，但没关系，不会换行的。 如何要让所有的td都不换行，现在这样一个个设置太麻烦了，可利用CSS来控制 td{ white-space: normal; } 参考链接：点击打开链接
Table不换行处理方法
良心有约
03-27 5650
目前有两种方法： 1.设置TD的样式为： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.添加<nobr></nobr>标签 前提：设置table的样式为：table-layout:fixed ...
TD不换行 nowrap属性
热门推荐
有梦就能实现
11-23 9万+
表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。 为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如
详解CSS（一）
Romised的博客
05-18 1034
CSS是什么、.基本语法规范、引入方式、内部样式表、行内样式表、外部样式表、选择器、基础选择器、标签选择器、类选择器、id选择器、通配符选择器、复合选择器、后代选择器、子选择器、并集选择器伪类选择器、字体属性、文本属性、文本颜色、文本对齐、文本装饰、文本缩进、行高
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 143
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 207
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
CSS-相对和绝对和固定位置
Kevin7_35Durant的博客
05-18 295
将位置改成相对位置，与原先的位置顶部相距100px。原来的位置是占用状态，其他元素无法使用。改变位置的参照物是自己原来的位置。元素的位置在网页滚动时不变。属性值：relative。属性值：absolute。改变位置的参照物是父元素。属性：position。属性：position。属性：positon。
table td 文字换行
08-31
在HTML中，`<table>`元素用于创建表格，`<td>`元素用于定义表格中的单元格。如果需要在`<td>`元素中进行文字换行，可以使用`<br>`元素或者设置CSS样式。 方法一：使用`<br>`元素 在需要换行的位置插入`<br>`元素即可，例如： ```html <table> <tr> <td>第一行<br>第二行</td> <td>单元格内容</td> </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </table> ``` 上述代码中，第一个`<td>`元素中的文字被`<br>`元素分成了两行。 方法二：使用CSS样式 通过设置CSS样式，也可以实现`<td>`元素中文字的换行。可以使用`white-space: pre-line`或者`word-wrap: break-word`属性。例如： ```html <style> td { white-space: pre-line; /* 或者使用 word-wrap: break-word */ } </style> <table> <tr> <td>第一行 第二行</td> <td>单元格内容</td> </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </table> ``` 上述代码中，`<td>`元素中的文字会根据`white-space: pre-line`属性的设置进行换行，或者使用`word-wrap: break-word`进行自动换行。 以上是两种常用的方法，可以实现在`<td>`元素中文字的换行效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值