HTML视频叠加文本过长不换行的解决方法咨询

当前代码的核心问题是.overlay未设置宽度限制，长文本会无限延伸无法换行。只需调整叠加层样式，添加宽度约束并优化文本对齐即可解决：

关键样式调整 #

给.overlay添加以下属性：

• max-width: 90%：限制叠加层最大宽度（预留边距避免贴视频边缘，可按需调整数值），触发文本自动换行
• text-align: center：确保换行后的每行文本都居中对齐
• 可选：移除<p>标签默认上下边距，避免额外间距干扰垂直居中

修改后的.overlay及关联样式：

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 8vw;
  font-family: Arial, Sans-Serif;
  opacity: 25%;
  z-index: 1;
  max-width: 90%; /* 限制宽度触发换行 */
  text-align: center; /* 换行文本居中 */
}

.overlay p {
  margin: 0; /* 清除p标签默认边距 */
}

完整代码示例 #

body {
  margin: auto;
  text-align: center;
  background-color: black;
  line-height: 0;
}

.container {
  position: relative;
  display: grid;
  height: 100%;
}

.container video {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 8vw;
  font-family: Arial, Sans-Serif;
  opacity: 25%;
  z-index: 1;
  max-width: 90%;
  text-align: center;
}

.overlay p {
  margin: 0;
}

<div class="container">
  <video type="video/mp4" src='data:video/mp4;base64,...'>Your browser does not support the video tag.</video>
  <div class="overlay">
    <p>这是一段超长的测试叠加文本，用来验证自动换行效果，确保文本始终在视频中央且不会超出显示范围</p>
  </div>
</div>

原理说明：max-width约束叠加层宽度，文本超出后自动换行；text-align: center保证每行文本居中；清除p标签边距避免破坏垂直居中逻辑，叠加层通过top:50% + left:50% + transform: translate(-50%,-50%)的组合，始终固定在视频正中央，不受文本长度变化影响。

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