如何在HTML --- 》table ---》td中实现换行?

发布时间 2023-08-31 08:46:05作者: 信铁寒胜

XTHS:设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可  

1、我在网上试了上面方式,并没有效果

2、最后我用下面第二种方式 ,“利用CSS的white-space属性实现换行,这个是没有问题的”

 

在HTML的table中,我们常常需要在单元格(td)中显示多行文字,但是默认情况下文字会超出单元格范围而导致显示不完整。本文将从多个方面来详细阐述如何在HTML的table的td中实现换行。

一、利用
标签实现换行

最常用的方式就是利用HTML中的
标签进行换行。在td中换行时,只需要在需要换行的地方添加
标签即可。

<table>
  <tr>
    <td>第一行文字<br>第二行文字</td>
  </tr>
</table>

  上述代码中,在td中添加了一个
标签,这样第一行文字和第二行文字就会分别显示在不同的行上。

二、利用CSS的white-space属性实现换行

我们也可以通过在CSS中设置单元格的white-space属性来实现在不同行的显示。white-space属性指定元素内的空白怎样处理。默认情况下,HTML中的空格和换行会被忽略,相邻的字符会被合并成一个字符。而我们可以通过设置white-space属性为pre-wrap来保留换行符和连续的空格。例如:

<style>
td {
  white-space: pre-wrap;
}
</style>
<table>
  <tr>
    <td>第一行文字
    第二行文字</td>
  </tr>
</table>

  上面的代码中,我们在CSS中设置了td的white-space属性为pre-wrap,这样在td中输入的多个空格和换行符就会得到保留,从而实现换行的效果。

三、利用CSS的word-wrap属性实现换行

有时候,在一个单元格中输入的文字很长,如果仅仅通过上述两种方式实现换行,可能会导致单元格的宽度被撑大。这时候我们可以通过CSS的word-wrap属性来实现在单元格中自动折行,避免单元格的宽度被撑大。

<style>
td {
  word-wrap: break-word;
}
</style>
<table>
  <tr>
    <td>这是一句很长很长的句子,需要在单元格中折行显示以免单元格被撑大</td>
  </tr>
</table>

上述代码中,我们在CSS中设置了td的word-wrap属性为break-word,这样当输入的文字超出单元格宽度时,文字就会自动折行,不会撑大单元格的宽度。

  

四、利用CSS的table-layout属性实现自适应单元格宽度

最后,我们来介绍一个可以实现在单元格中自动换行并自适应单元格宽度的方法。可以通过CSS的table-layout属性来实现。table-layout属性指定单元格是否平均分配表格的宽度,或者根据单元格内容自适应表格宽度。如果设置为auto,则单元格的宽度会自适应内容宽度。

<style>
table {
  table-layout: auto;
}
</style>
<table>
  <tr>
    <td>这是一句很长很长的句子,需要在单元格中折行显示以免单元格被撑大</td>
  </tr>
</table>

  上述代码中,我们在CSS中设置了table的table-layout属性为auto,这样在单元格中输入的文字超出单元格宽度时,文字就会自动折行,并自适应单元格宽度。

参考:如何在HTMLtabletd中实现换行?_笔记大全_设计学院 (python100.com)