如何让HTML元素始终包裹内容？滚动时内容溢出问题求助

兄弟，你遇到的这个情况其实是默认HTML和Body元素的布局特性导致的——默认情况下<body>的宽度是跟着视口走的，而你那段超长的无换行文本会直接突破这个宽度限制，加上浏览器的滚动条是属于<html>元素的，所以拖动滚动条时，就会看到内容跑到<body>的边框外面去了。

给你几个实用的解决方案，按需选就行：

方案1：让超长文本自动换行 #

这是最常用的处理方式，让文本在<body>的边界处自动换行，从根源上避免溢出。只需要给<body>加个文本换行的CSS属性：

body {
  border: 1px solid;
  /* 强制文本在任意字符处换行，适合中文/无空格的长文本 */
  word-break: break-all;
  /* 或者优先在单词边界换行，更适合英文场景 */
  /* overflow-wrap: break-word; */
}

方案2：让Body适配内容宽度，同时保留全局滚动条 #

如果不想让文本换行，希望<body>能完整包裹住超长内容，拖动滚动条时<body>也跟着移动，不会出现内容溢出边框的情况，可以这么设置：

html {
  /* 让html层出现横向滚动条 */
  overflow-x: auto;
}
body {
  border: 1px solid;
  /* 保证内容少时body占满视口宽度 */
  min-width: 100%;
  /* 内容超长时，body自动适配内容宽度 */
  width: fit-content;
}

方案3：让Body自己带滚动条 #

如果希望滚动条只出现在<body>内部，而不是全局的话，可以给<body>设置横向滚动：

body {
  border: 1px solid;
  /* 超出部分显示滚动条 */
  overflow-x: auto;
  /* 限制body的最大宽度为视口宽度，避免内容撑破布局 */
  max-width: 100vw;
}

内容的提问来源于stack exchange，提问作者Zhengquan Bai