网页文本横向延伸需横向滚动，如何改为仅纵向滚动查看
2026-5-25
如何让HTML文本自动换行，避免横向滚动？
这个问题很常见！当你的文本里有超长单词、连续无空格的字符串（比如长URL、一串数字）时，浏览器默认不会自动拆分它们，就会导致文本撑出容器，需要横向滚动。我给你几个简单的CSS解决方案，保证只需要纵向滚动就能看完所有内容：
核心解决方案：用CSS控制文本换行
你只需要给<p>标签添加几个CSS属性，就能强制文本在容器宽度内自动换行：
方案1：基础自动换行（推荐）
这个方案会优先在单词间隙换行，只有当单个单词太长超出容器时，才会拆分单词：
p { /* 允许长单词换行到下一行 */ overflow-wrap: break-word; /* 确保段落不会超出视口宽度 */ max-width: 100%; /* 可选：添加内边距，让文本不紧贴页面边缘 */ padding: 0 1rem; } body { /* 移除body默认的边距，避免额外的横向滚动 */ margin: 0; }
方案2：强制任意字符处换行（适合特殊场景）
如果你的文本里有完全没有空格的超长内容（比如一长串数字、无分隔符的代码），可以再加一个属性，强制在任意字符位置换行：
p { overflow-wrap: break-word; /* 强制在任意字符处换行，彻底避免横向滚动 */ word-break: break-all; max-width: 100%; padding: 0 1rem; } body { margin: 0; }
完整修改后的HTML代码
把CSS放到<head>的<style>标签里，最终代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p { overflow-wrap: break-word; word-break: break-all; /* 可选，根据你的文本情况决定是否添加 */ max-width: 100%; padding: 0 1rem; } body { margin: 0; } </style> </head> <body> <p>{{text}}</p> </body> </html>
为什么这个方法有效？
overflow-wrap: break-word：告诉浏览器，当一个单词太长无法在一行显示时，可以拆分这个单词，让剩余部分换行到下一行。word-break: break-all：更进一步，不管单词是否完整，只要到了容器边缘就换行，适合处理完全没有空格的超长内容。max-width: 100%：确保段落的宽度不会超过父容器（这里是body）的宽度，而body的宽度默认是视口宽度，所以文本会始终在页面范围内。
内容的提问来源于stack exchange，提问作者Syed Ali
相关产品推荐
相关产品推荐
