使用word-wrap/overflow-wrap: break-word时li元素无法换行的问题

关键CSS调整方案 #

针对.link_shelf_third类及其内部li元素，逐一排查并修改以下属性：

• 强制文本换行：给li元素添加换行相关属性，处理长文本或连续字符：

  .link_shelf_third li {
    white-space: normal; /* 取消可能存在的nowrap设置 */
    word-wrap: break-word;
    overflow-wrap: break-word; /* 兼容主流浏览器的长单词换行 */
  }
  

• 移除溢出隐藏：检查父容器和li元素是否有overflow: hidden，这会导致超出内容被隐藏，需调整：

  .link_shelf_third,
  .link_shelf_third li {
    overflow: visible; /* 或直接删除overflow: hidden声明 */
  }
  

• 修复布局约束：如果.link_shelf_third使用flex布局，确保开启换行：

  .link_shelf_third {
    display: flex;
    flex-wrap: wrap; /* 允许flex子元素换行 */
  }
  

  若使用grid布局，可改用自适应列宽：

  .link_shelf_third {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 根据需求调整最小宽度 */
  }
  

• 取消固定宽度：避免给li设置固定宽度，让其自适应容器：

  .link_shelf_third li {
    width: auto;
    max-width: 100%; /* 确保不超出容器边界 */
  }
  

验证方法 #

1. 重新编译SCSS并刷新页面
2. 用Chrome调试工具查看.link_shelf_third和li的计算样式，确认上述属性已生效
3. 加入长文本测试，检查是否正常换行而非隐藏

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