文本溢出父div，break-word无效，移动端通知框文本换行问题

问题根源 #

你的通知文本无法换行溢出，核心原因是：

• 容器和文本元素都设置了固定宽度（如width:645px、width:636px），移动端视图宽度不足时直接溢出
• flex: none限制了flex子元素的收缩能力，无法自适应剩余空间
• 固定高度height:64px导致文本换行后无法撑开容器，被截断

修改后的CSS代码 #

/* 基础容器：移除固定宽高，改用自适应宽度和最小高度，添加盒模型优化 */
.notification__wrapper_error {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 改为flex-start，避免文本换行后垂直居中截断 */
  padding: 0 8px 0 0;
  gap: 20px;
  width: 100%; /* 自适应父容器宽度 */
  min-height: 64px; /* 保留最小高度，内容撑开时自动增高 */
  box-sizing: border-box; /* 让padding包含在宽度内，避免溢出 */
  background: rgba(224, 30, 90, 0.1);
  border-radius: 0 8px 8px 0;
  border-left: 2px solid #E01E5A;
}

.notification__icon_wrapper {
  margin-left: 10px;
  margin-top: 20px; /* 手动对齐文本垂直位置，适配容器flex-start布局 */
}

/* 内容容器：移除固定宽高，设置flex:1占据剩余空间 */
.notification__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 20px 0;
  gap: 10px;
  flex: 1; /* 占据容器剩余空间 */
  min-width: 0; /* 解除flex子元素最小宽度限制，触发文本换行 */
  box-sizing: border-box;
}

/* 文本容器：移除固定宽高，设置换行规则 */
.notification__text {
  font-family: "Museo Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  flex: 1;
  overflow-wrap: break-word; /* 强制长词换行 */
  white-space: normal; /* 确保文本正常换行 */
  text-align: left; /* 移动端左对齐更友好，可按需调整 */
}

关键修改点说明 #

1. 移除固定宽高：将容器和文本元素的width改为100%或flex:1，height改为min-height，让内容自适应视图宽度和高度
2. 调整flex属性：
   • 给.notification__content设置flex:1，让它占据容器剩余空间
   • 添加min-width:0，解除flex子元素的最小宽度限制，确保文本能收缩换行
   • 移除flex:none，允许元素自适应布局
3. 处理换行规则：保留overflow-wrap: break-word，配合white-space:normal确保文本正常换行
4. 盒模型优化：添加box-sizing:border-box，让padding不会额外增加元素宽度，避免溢出

移动端适配补充 #

如果需要针对特定屏幕尺寸优化，可添加@media规则：

@media (max-width: 768px) {
  .notification__wrapper_error {
    padding: 16px; /* 移动端增加内边距，提升可读性 */
    flex-direction: column; /* 小屏幕下图标和文本垂直排列 */
    gap: 12px;
  }
  .notification__icon_wrapper {
    margin-left: 0;
    margin-top: 0;
  }
  .notification__content {
    padding: 0;
  }
}

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