在带单侧外边距的div内使用col-sm时文本溢出问题求助

嘿，刚入门网页设计就遇到布局小坑啦？别慌，我来帮你梳理清楚问题根源，再给你几个靠谱的解决办法！

你现在的问题是：给包裹整个页面的#everything设置了50px左外边距来给侧边固定导航栏腾空间，但文本没法适配这个容器宽度，反而随页面尺寸调整甚至溢出。核心原因是你只设置了外边距，但没给内容容器做好宽度约束，也没处理好文本的换行规则。

下面是具体的解决方案，按从简单到现代的顺序排列：

方案一：用calc()计算宽度 + 盒模型优化 #

这是最直接的修复方式，不用改页面结构：

1. 先给全局元素统一设置盒模型，避免内边距/边框额外增加宽度：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 然后给#everything设置自适应宽度，同时确保文本换行：

#everything {
  margin-left: 50px;
  width: calc(100% - 50px); /* 精确计算页面宽度减去左外边距的剩余空间 */
  overflow-wrap: break-word; /* 让长单词/连续字符自动换行，不溢出 */
}

calc(100% - 50px)会让容器刚好填满导航栏之外的所有可用空间，overflow-wrap则解决了长文本溢出的问题。

方案二：用Flexbox构建更清晰的布局（推荐） #

如果你的页面结构还能调整，用Flexbox布局会更简洁，后续维护也更方便：
先调整HTML结构，把导航栏和主内容分开：

<div class="page-wrapper">
  <nav class="fixed-sidebar">
    <!-- 你的导航栏内容 -->
  </nav>
  <main id="everything">
    <!-- 你的页面主内容 -->
  </main>
</div>

然后写对应的CSS：

.page-wrapper {
  display: flex;
  min-height: 100vh; /* 让整个容器占满浏览器视口高度 */
}
.fixed-sidebar {
  width: 50px;
  position: fixed; /* 固定导航栏位置 */
  height: 100vh;
  /* 这里可以加导航栏的样式，比如背景色 */
}
#everything {
  flex: 1; /* 自动占据导航栏之外的所有剩余空间 */
  margin-left: 50px; /* 避开固定的导航栏，防止内容被遮挡 */
  overflow-wrap: break-word;
}

这种方式用弹性布局的逻辑让主内容自动适配剩余空间，布局结构更清晰，也不容易出现宽度计算错误。

额外小提示 #

如果还是有文本溢出的情况，可以再加上：

• word-break: break-all：更强制的换行规则，适合包含多语言或超长连续字符的场景
• 避免给文本元素设置固定宽度，让它继承父容器的自适应宽度

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