首页 >web前端 >css教程 >如何在 HTML 中使表格单元格内容换行?

如何在 HTML 中使表格单元格内容换行?

DDD
DDD原创
2024-10-27 08:57:03629浏览

How to Make Table Cell Content Wrap in HTML?

如何强制表格单元格要换行的内容

在提供的代码中,

中的文本是提交时元素会拉伸。要解决此问题并确保文本在单元格内换行,可以采取以下步骤:

解决方案

  1. 表格布局:
    添加表格-布局:固定到;元素。此属性指定表格将具有固定布局,强制其列具有指定的宽度。
  2. 自动换行:
    将 word-wrap:break-word 添加到 < ;td>元素。此属性允许在表格单元格内自动换行,从而允许长文本分成多行。
  3. 示例

    <br> <br> <br> 表 {border-collapse:collapse;表格布局:固定;宽度:310px;}<br> 表 td {border:solid 1px #fab;宽度:100px;自动换行:断字;}<br> 风格><br><p><br> </p><pre class="brush:php;toolbar:false">  <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>




    演示:



    <pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

           <桌子></p><pre class="brush:php;toolbar:false">      <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
    

以上是如何在 HTML 中使表格单元格内容换行?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn