HTML里面加了一个样式属性：word-break: break-all，可以实现表格的自动换行，具体参考代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><title>table内的td内容不换行</title><style type="text/css"><!--body{ font-size:12px}.breakLine{word-break: break-all}--></style></head><body><table width="400"><tr><td width="90" height="30">处理人工号：</td><td width="410" class="breakLine">001156,001157,001145,001149,001178,001123,001140,001167,001168,001134,001135</td></tr></table></body></html>word-break属性简单介绍如下：语法：word-break : normal | break-all | keep-all取值： normal: 默认值。允许在词间换行 break-all: 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all: 与所有非亚洲语言的 normal 相同。1、普通设置： style{ width:400px overflow:hidden text-overflow:ellipsis display:-webkit-box / * autoprefixer:off * / -webkit-box-orient:vertical / * autoprefixer:on * / -webkit-line-clamp:4 } 效果如下：以上会导致英文和数字自动换行不对齐。 2、解决后 style{ width:400px word-break:break-all word-wrap:break-word overflow:hidden text-align:left//这是我在表格中使用时表头设置了居中，通用可不设置 text-overflow:ellipsis display:-webkit-box / * autoprefixer:off * / -webkit-box-orient:vertical / * autoprefixer:on * / -webkit-line-clamp:4 }
使用代码可以时限自动换行。IE浏览器使用样式tablelayoutfixed，引用内容为abcdefghigklmnopqrstuvwxyz1234567890。即可实现浏览器自动换行。
CSSGrid网格布局又称为Grid网格，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS一直用来布局我们的网页，但一直以来都存在这样或那样的问题。
一开始我们用表格table，然后是浮动float，再是定位postion和内嵌块inline-block，但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能例如垂直居中。
Flexbox的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局实际上Flexbox和Grid能协同工作，而且配合得非常好。Grid网格布局是第一个专门为解决布局问题而创建的CSS模块，只要我们一直在制作网站，我们就一直要讨论这些问题。
