css grid布局是目前前端页面布局中非常常用的方案，它能灵活划分页面区域，实现复杂的排版效果。但在实际使用中，很多开发者会遇到网格容器内文字换行不规整的问题，比如文字超出容器边界、换行断句不合理、不同网格项内的文字对齐不一致等，这些问题可以通过调整word wrap和align self属性来解决。
问题产生的常见原因
grid布局下文字换行异常通常不是单一因素导致的，常见的原因主要有两类：一是文字本身的换行规则没有被正确约束，二是网格子项在交叉轴上的对齐方式影响了文字的显示区域。我们可以先通过简单的示例复现问题，再看对应的解决方式。
问题复现示例代码
下面是一个基础的grid布局示例，其中第二个网格项的内容较长，没有做换行处理时会出现溢出的情况：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 400px;
border: 1px solid #ccc;
padding: 10px;
}
.grid-item {
border: 1px solid #eee;
padding: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">短文本</div>
<div class="grid-item">这是一段非常长的测试文本，用来演示grid布局下文字没有设置换行时的溢出情况</div>
</div>
</body>
</html>
使用word wrap属性控制文字换行规则
word-wrap是css中用来控制文本换行行为的属性，它的取值主要有normal和break-word两种，默认值是normal，也就是只在允许的断字点换行，对于长单词或者连续的数字、符号，不会主动换行，这也是很多溢出问题的根源。
word wrap的属性取值说明
| 属性值 | 作用说明 |
|---|---|
| normal | 默认值，只在允许的换行点换行，长文本可能溢出容器 |
| break-word | 如果行内没有足够的空间容纳整个单词，会将单词拆分换行 |
应用word wrap解决换行问题
给上面的示例中的网格项添加word-wrap: break-word，长文本就会被拆分换行，不会再溢出容器：
.grid-item {
border: 1px solid #eee;
padding: 5px;
word-wrap: break-word; /* 添加这行属性 */
}
如果需要兼容更老的浏览器，也可以同时使用overflow-wrap属性，它的作用和word-wrap一致，是现代浏览器更推荐的标准属性：
.grid-item {
border: 1px solid #eee;
padding: 5px;
overflow-wrap: break-word;
word-wrap: break-word; /* 兼容老版本浏览器 */
}
使用align self调整网格项对齐方式
有时候文字换行正常，但是不同网格项内的文字在交叉轴上的对齐位置不一致，看起来换行效果不规整，这时候就需要用到align-self属性。这个属性用来设置单个网格项在交叉轴（默认是垂直方向）上的对齐方式，会覆盖grid容器设置的align-items属性。
align self的常用取值
- stretch：默认值，网格项会拉伸填满交叉轴方向的空间
- start：网格项在交叉轴起点对齐
- end：网格项在交叉轴终点对齐
- center：网格项在交叉轴居中对齐
- baseline：网格项按照文字基线对齐
结合align self优化换行显示
如果希望所有网格项的文字顶部对齐，避免因为内容高度不同导致对齐混乱，可以给单个网格项设置align-self: start：
.grid-item {
border: 1px solid #eee;
padding: 5px;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* 给第二个网格项设置顶部对齐 */
.grid-item:nth-child(2) {
align-self: start;
}
如果希望所有网格项都保持顶部对齐，也可以直接在grid容器上设置align-items: start，不需要给每个子项单独设置align-self：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 400px;
border: 1px solid #ccc;
padding: 10px;
align-items: start; /* 所有子项交叉轴顶部对齐 */
}
综合场景示例
下面是一个同时应用word-wrap和align-self的完整示例，解决grid布局下文字换行不规则的问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
width: 600px;
border: 1px solid #ccc;
padding: 15px;
align-items: start; /* 所有子项顶部对齐 */
}
.grid-item {
border: 1px solid #eee;
padding: 8px;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
}
/* 特殊网格项可以单独调整对齐方式 */
.grid-item.special {
align-self: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">短文本</div>
<div class="grid-item">这是一段非常长的测试文本，用来演示grid布局下文字设置换行后的正常显示效果，不会再出现溢出问题</div>
<div class="grid-item special">居中对齐的网格项，内容换行后整体居中显示</div>
</div>
</body>
</html>
注意事项
如果网格容器设置了固定高度，同时align-items为默认值stretch，那么网格项会被拉伸到和容器一样高，这时候文字换行后的空白区域会比较多，可以根据实际需求调整align-items或者align-self的取值。另外如果文字中包含中文，默认情况下中文会在任意字符处换行，不需要额外设置word-wrap，只有遇到长英文单词、连续数字或者特殊符号时才需要配置该属性。
css_gridword_wrapalign_selfgrid_layout修改时间：2026-07-08 02:54:33