CSS文本换行失效求助：已设置word-wrap与max-width仍无法换行

以下是几种可能的原因及对应的修复方案：

• 元素为行内元素：行内元素（如<span>、<a>）默认不会遵循宽度限制并换行，需修改元素的显示类型：

  .text {
    word-wrap: break-word;
    max-width: 100px;
    display: inline-block; /* 或设置为 display: block */
  }
  

• 存在强制单行的样式：检查元素或其父元素是否被设置了white-space: nowrap，该属性会强制文本保持单行，需覆盖或移除：

  .text {
    word-wrap: break-word;
    max-width: 100px;
    white-space: normal; /* 覆盖 nowrap 属性 */
    display: inline-block;
  }
  

• 使用更兼容的属性：word-wrap是overflow-wrap的别名，现代浏览器更推荐使用标准属性：

  .text {
    overflow-wrap: break-word;
    max-width: 100px;
    display: inline-block;
  }
  

• 父元素宽度无限制：若父元素宽度远大于100px，且目标元素为块级元素，需确保父元素不会无限制撑开，可给父元素也设置宽度限制。

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