如何用CSS实现长单词自动换行？已尝试overflow-wrap无效

嘿，我瞅了下你的代码，问题出在.container的display: table-cell上！这个属性会让容器的宽度跟着内容自动撑开，完全无视max-width: 100%的限制——哪怕你给h1加了overflow-wrap: break-word，也没法触发换行，因为容器本身已经被超长单词撑得超出页面宽度了。

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

方案1：改用Flex实现居中（推荐） #

把容器改成Flex布局，既能实现你要的垂直水平居中，又能让容器严格遵守宽度限制：

.container {
  max-width: 100%;
  margin: 0 20px;
  /* 替换table-cell为flex布局 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 可选，让容器占满视口高度实现全屏居中 */
}

h1 {
  text-align: center;
  font-weight: 800;
  padding: 0 40px;
  color: #bec0ca;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.5rem;
  max-width: 100%;
  /* 组合这两个属性，确保超长单词能被拆分换行 */
  overflow-wrap: break-word;
  word-break: break-word;
}

方案2：保留Table布局但修复宽度问题 #

如果你一定要用table-cell，得给它套一个display: table的父容器，并且给父容器设置宽度限制：

.table-wrapper {
  display: table;
  width: 100%;
  max-width: 100%;
}

.container {
  max-width: 100%;
  margin: 0 20px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

h1 {
  text-align: center;
  font-weight: 800;
  padding: 0 40px;
  color: #bec0ca;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.5rem;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

对应的HTML也要调整：

<div class="table-wrapper">
  <div class="container"> 
    <h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1> 
  </div>
</div>

核心逻辑就是先把容器的宽度牢牢限制在页面范围内，这样h1的换行属性才能发挥作用。另外word-break: break-word可以作为overflow-wrap的补充，让超长单词在更多场景下都能被拆分换行~

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