文本超出父容器时自动换行问题求最优响应式解决方案

针对文本碰到父容器边界却无法自动换行的问题，可通过以下CSS调整解决：

• 给父容器.card添加宽度约束，避免它随内容无限拉伸：

  .card {
      display: grid;
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 0.5rem;
      overflow: hidden;
      width: 100%; /* 让容器继承父级宽度限制，也可根据布局需求设为max-width: 100% */
      grid-template-columns: 1fr; /* 确保grid列占满容器可用宽度 */
  }
  

• 增强文本换行的兼容性与适配性，给.card-description补充属性：

  .card-description {
      padding: 1rem;
      overflow-wrap: break-word;
      word-break: break-word; /* 兼容更多浏览器的换行场景 */
      white-space: pre-wrap; /* 保留文本中的连续空格/换行，同时自动换行 */
  }
  

原理说明 #

使用display: grid的容器默认会跟随子元素内容宽度拉伸，导致容器没有明确的边界，文本自然不会触发换行。给.card设置宽度约束后，容器会被限制在父级的宽度范围内，当文本碰到容器边界时就会自动换行；grid-template-columns: 1fr则确保grid布局的列占满容器宽度，避免列宽随内容撑开。

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