Flex布局任务列表文本溢出：如何避免横向滚动并实现自动换行

问题核心 #

你的待办项（li）是flex容器，内部的标题、内容区域默认没有宽度限制，遇到连续无空格的长文本时会撑破容器，触发页面横向滚动；同时缺少文本强制换行的CSS规则，导致长内容无法自动折行。

解决方案 #

1. 给文本区域添加宽度限制与换行规则

给.task_title和.task_body添加以下CSS，确保它们被flex容器约束宽度，同时支持长文本换行：

.task_title, .task_body {
    flex: 1; /* 让标题和内容平分可用空间，可根据需求调整比例 */
    min-width: 0; /* 关键：允许flex子项收缩到内容最小宽度以下，打破flex默认的宽度限制 */
    word-wrap: break-word; /* 让长单词/连续无空格字符强制换行 */
    overflow-wrap: break-word; /* 兼容不同浏览器，效果与word-wrap一致 */
}

2. 优化flex布局细节

调整li和编辑删除区域的样式，确保操作区不被压缩，同时子项间距更合理：

li {
    display: flex;
    justify-content: space-between;
    width: 50%;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 1rem;
    gap: 1rem; /* 子项间添加间距，替代margin更整洁 */
}

.edit_delete {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 让编辑/删除区域保持固定宽度，不被文本挤压 */
    gap: 0.5rem; /* 两个链接间添加间距 */
}

3. 完整修改后的CSS代码

* {
    box-sizing: border-box;
}

ul {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0; /* 移除ul默认内边距，避免布局偏移 */
}

li {
    display: flex;
    justify-content: space-between;
    width: 50%;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 1rem;
    gap: 1rem;
}

.task_title, .task_body {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    align-items: center; /* 和操作区保持垂直居中对齐 */
}

.edit_delete {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

效果验证 #

修改后，无论标题/内容是带空格的长段落还是连续无空格的字符，都会在li容器宽度内自动换行，页面不会出现横向滚动条，同时编辑、删除链接区域保持正常显示，不会被压缩。

内容的提问来源于stack exchange，提问作者Ali Asadi