网页hover翻转区块内文本无法正常段落显示问题求助

你的问题核心是.img-back容器缺少必要的排版限制，导致内部<p>标签文本无法在区块内规整换行。以下是具体修复方案：

关键CSS调整步骤 #

• 给.img-back设置尺寸适配与盒模型控制，确保它和父容器.x1尺寸匹配：

  .img-back {
    width: 100%;
    box-sizing: border-box;
    padding: 15px; /* 给文本添加内边距，避免紧贴容器边缘 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 让文本垂直居中，优化视觉效果 */
  }
  

• 为<p>标签添加文本换行控制，强制长文本在容器内自动换行：

  .img-back p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin: 0; /* 去掉默认段落外边距，避免溢出 */
  }
  

修复原理 #

• width: 100%让.img-back完全填充父容器宽度，不会超出边界；
• box-sizing: border-box确保内边距不会额外增加容器总宽度；
• word-wrap和overflow-wrap解决长单词或连续字符的换行问题，避免文本撑破容器；
• Flex布局让文本在区块内垂直居中，同时高度填满父容器，避免内容溢出。

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