首页 > web前端 > css教程 > 如何强制表格单元格内的文本换行?

如何强制表格单元格内的文本换行?

DDD
发布: 2024-10-27 02:48:30
原创
454 人浏览过

How to Force Text Wrap Within Table Cells?

如何在表格单元格内强制文本换行

问题

在某些单元格中包含冗长文本的数据表中,单元格单向展开而不是单向展开环绕文本。实现了 CSS 类(可包装),但问题仍然存在。该表格包含在 div 中,引发了 div 和表格宽度操作是否必要的问题。

解决方案

要强制表格单元格内的文本换行,请使用以下 CSS 属性:

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>
登录后复制

说明:

  • table-layout:固定确保所有列的宽度固定,防止单元格水平扩展。
  • word-wrap:当单词太长而无法适应列宽时,break-word 会导致文本中断并换行到下一行。

示例

这里是一个示例来说明解决方案:

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <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></code>
登录后复制

结论

通过实现 table-layout:fixed 和 word-wrap:break-word,您可以轻松地在表格单元格内强制文本换行,确保无论文本长度如何,表格布局都保持一致和可读。

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板