td中内容不换行的解决办法

最新推荐文章于 2024-06-18 15:35:00 发布

jsuzzy

最新推荐文章于 2024-06-18 15:35:00 发布

阅读量7.2k

点赞数

分类专栏： css样式问题文章标签： firefox table ie

本文链接：https://blog.csdn.net/jsuzzy/article/details/5389123

版权

css样式问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

当td的内容过长时，有时会出现内容不换行问题，导致table溢出容器，样式发生变化。

以前的解决办法是给td加样式word-break:break-all;这个属性虽然能解决ie中出现的问题，但对于firefox却不支持此属性。

经过多次尝试，终于找到了解决的办法：

首先给table加样式table-layout:fixed;

然后给td加样式word-wrap:break-word;

这样就能解决大多数td中内容不换行的问题了！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jsuzzy

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

javascript 使td内容不换行不撑开

10-27

本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。首先，我们需要理解CSS中的几个关键属性，它们在解决这个问题上起着核心作用： 1. `white-space`: 这个属性控制元素内的空白符...

td标签中，内容过长不会自动换行

qq_36437172的博客

03-06

2466

1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all;（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ） 2.把表格的sytle的table-layout：fixed，表格固定宽度，表格即要自适应他外面的容器，也不要撑出去，然后设置td的word...

参与评论您还未登录，请先登录后发表或查看评论

用CSS防止HTML页面输入字符过多撑大布局

simpleblue88的专栏

09-20

1853

table-layout语法：table-layout : auto | fixed 取值：auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来 fixed : 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性

td内不会自动换行，解决方法

baozisss的博客

07-20

7501

table固定宽度，td内容溢出换行

dabaoai123123的博客

07-05

420

table固定宽度，td内容溢出换行。

TD不换行也不会被撑大撑开并加上薄边框的方法

热门推荐

王德封-逐浪

06-05

1万+

TD不换行也不会被撑大的方法TD不换行也不会被撑大撑开的方法：table{table-layout : fixed;width:100%;}td{word-break : keep-all; overflow: hidden;white-space:nowrap;text-overflow: ellipsis;}注意：table的宽度一定要设置，否则TD还是不被内容撑大的，宽度可以是百分比、也可...

html小技巧之td,div标签里内容不换行

10-25

总结起来，在`<td>`和`<div>`标签中控制内容不换行，可以通过`<nobr>`标签和CSS样式`white-space: nowrap;`两种方法来实现。在实际开发中，推荐使用CSS样式，因为它更加符合Web标准，并且具有更好的跨浏览器支持和...

table中td内容换行问题

09-25

然而，在实际使用过程中，可能会遇到一些意料之外的问题，比如“td内容换行问题”。这个问题通常发生在用户输入了大量连续的无间隔英文字符，导致单元格(`<td>`)无法自动换行，从而破坏了表格的正常布局。例如，...

关于td里面内容不换行的解决办法

MYuanFang的博客

05-07

622

转载：https://blog.csdn.net/qq_27791709/article/details/78835781

浏览器显示td内容自动换行问题的处理

xkq_lyx的专栏

02-04

3724

1、需要设置table的宽度为固定值，设置表格格式是固定的： 2、设置td不换行，溢出部分自动隐藏： content 3、设置文本内容超出范围时显示省略号： content

关于table中内容过长不换行的方法

JehuXie的博客

08-24

3218

添加style属性nowrap：禁止文字换行。

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

iteye_12724的博客

06-23

1174

td 单元格的nowrap属性值按照XHTML为nowrap，但是按照W3C的文档说明，不赞成使用，推荐使用样式代替，那么可以代替的样式是word-break，该css的值有normal（默认值）、break-all、keep-all 3个，但使用时要注意的是，td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用，如果设置了td宽度，则nowr...

ng-zorro-antd高版本没有设置表格自动换行

y_onghuming的博客

09-12

1101

我用的是"ng-zorro-antd": "^7.3.2"（在package.json里查看引入插件的版本），发现在table的样式里已经没有表格自动换行的设置了，之前用的低版本是有的。这样造成的问题的是： 1.如果没有指定列宽的百分比，内容过长的列会挤之前的列，直到其他列占的位置很小了才会换行，例如： 2.如果指定了列宽，那么就一直不换行，哪怕和之前的内容重叠，总之看起来...

Table 宽度超出页面宽度时，出现滚动条，单元格内容不换行实

最新发布

weixin_43923808的博客

06-18

322

【代码】Table 宽度超出页面宽度时，出现滚动条，单元格内容不换行实。

html中td 的值不换行符,html中 td样式的是否换行的问题

weixin_30068877的博客

06-09

1392

html中td样式的是否换行的问题(2016-03-08 10:41:29)标签：javait从网上获取的方法总结了一下：TD:不换行td单元格的nowrap属性值按照XHTML为nowrap，但是按照W3C的文档说明，不赞成使用，推荐使用样式代替，那么可以代替的样式是word-break，该css的值有normal(默认值)、break-all、keep-all3个，但使用时要注意的是，td元...

【HTML】html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决...

weixin_30505751的博客

09-25

3906

需求如下图：追加给前台后，效果如下：可以在源码看到：是将后台给出来的数据，直接当作字符串给填充在了前台HTML中。而查看浏览器编译后的HTML源码可以发现：原来字符串中的<br> 的<>符号已经被转义实际是想将渲染出来的字符串中的...

Tips: 解决XSLT中table内容<br/>换行问题

星辰海閣

08-27

1090

1. use CDATA contains the TEXT, like : This will prepare your computer for use]]> use to begin with new row. 2. XSLT content: dis

html td中数字自动换行

03-30

`来实现单元格中的数字自动换行。例如： ```html <td style="word-wrap: break-word;">123456789012345678901234567890123456789012345678901234567890</td> <td style="word-break: break-all;">...