如何使用css让td中的文字自动换行

1、首先打开hbuilder软件，新建一个html文件，里面设置一个3行一列的table表格。2、然后在style标签中设置table的样式，给table一个宽度和高度，并且把字体调大，设置背景色；再设置td的样式，给它们添加word-wrap和word-break两个属性就可以了，此css属性表示在长单词或 URL 地址内部进行换行。3、...

如何使用css让td中的文字自动换行

1、首先打开hbuilder软件，新建一个html文件，里面设置一个3行一列的table表格。

2、然后在style标签中设置table的样式，给table一个宽度和高度，并且把字体调大，设置背景色；再设置td的样式，给它们添加word-wrap和word-break两个属性就可以了，此css属性表示在长单词或 URL 地址内部进行换行。

3、然后打开浏览器，就可以看到文字已经自动换行了。

2019-07-09

一、首先打开代码编辑器（dreamweaner），然后创建一个新的代码标签页，如下图：

二、然后在<head></head>处创建一个CSS样式，如下图：

三、然后就是创建div框架了和table表格创建，如下图：

四、创建好后，就要设置CSS样式了（在第二步创建CSS样式里面设置）。下图中第二个箭头所指的就是div框架，第一个箭头所指的就是对这个div框架添加样式或属性，分别是：长、高、网页居中、背景颜色

五、接下来就是添加表格和相应的样式及属性了，如下图（添加了三行三列的表格）：

六、然后就是给表格添加CSS样式，如下图箭头所指的地方：

七、这样就能够让td里面的文字自动换行了，给td添加这个属性：word-wrap:break-word;word-break:break-all; 就是让td里面的文字换行，但前提是需要给这个td添加一个宽度才会有效果的

八、写完上述代码后就是下图中寨网页上展现的效果

2017-03-22

①可以给td中添加width属性，如：<td width="30"></td>
②可以给td添加css样式控制宽度，如:<td style="width: 30px"></td>
这样文字会自动换行。2016-10-12

（1）如果你要让他自动换行，那你至少要给它定一个宽度width，不然它没宽度限制是不可能自动换行的
（2）如果你定义了宽度width，仍然不能进行换行，则可以使用这个属性，你可以在css添加这么一行代码
td{
word-wrap:break-word; //这个是对太长的单词进行换行
word-break:hyphenate; // 这个是文字在恰当的断字点进行换行

}
（3）注：要使用(2)里面的代码，一定要在td里面定义宽度才行2016-10-28

word-wrap: break-word;

word-break: break-all;望采纳2016-08-22

只要 td 的宽度固定就可以了2016-08-22

mengvlog 阅读 11 次 更新于 2025-06-20 01:22:47 我来答关注问题 0

6 个回答檬味博客专题活动

css中设置table中的td内容自动换行
解决办法是js处理下连续的英文字。但是这情况是较极端的情况，可以容忍。--- 在前端table制作中，由于使用了一些插件导致table无法自动换行，智能手动为标签添加换行样式。表格换行代码：td{ white-space:pre-line;word-wrap: break-word; word-break: break-all;} white-space：pre-line; //合...
如何使用css让td中的文字自动换行
1、首先打开hbuilder软件，新建一个html文件，里面设置一个3行一列的table表格。2、然后在style标签中设置table的样式，给table一个宽度和高度，并且把字体调大，设置背景色；再设置td的样式，给它们添加word-wrap和word-break两个属性就可以了，此css属性表示在长单词或 URL 地址内部进行换行。3、然...
html页面中的table控件,td标签里面是文字,怎样设置style才能文字垂直居中?
在HTML页面中，若需让表格单元格（td）内的文字实现垂直居中，可以采用两种方法。首先，直接利用TD标签的属性进行设置，如使用align="center"实现水平居中，垂直居中则使用valign="middle"。其次，在td标签内直接添加行内样式，例如style="text-align:center;vertical-align:middle;"。然而，如果td数量较多...
如何css让表格td中的文字垂直居中,请注意这都是一行一列的?
文字垂直居中的有如下的方法方法一：valign:middle 代码如下：垂直居中方法二：style="display:table-cell; vertical-align:middle"代码如下：垂...
#CSS#在设定table为百分比时,如何实现火狐,Chrome下TD内容文字超出时自动换行?
/*自动换行，IE,Chrome通用，FireFox连续英文不换行(遇空格换一行)*/ .AutoNewline_break{word-wrap:break-word; word-break:break-all; } .AutoNewline_normal{word-wrap:break-word; word-break:normal; } /*强制不换行，IE,FireFox,Chrome通用*/.NoNewline{white-...

其他CSS类似问题

檬味博客在线解答立即免费咨询

如何使用css让td中的文字自动换行

其他CSS类似问题

CSS相关话题