fix: 标题预览span改div，确保长标题自动换行不超出视频边界 #1244

Merged

xiaoxia merged 3 commits from fix/title-preview-wrap into develop 2026-08-05 14:49:46 +08:00

Conversation 5 Commits 3 Files Changed 1

+10 -6

xiaoxia commented 2026-08-05 14:39:59 +08:00

Owner

Copy Link

Copy Source

问题

标题预览使用 <span> 渲染，span 是 inline 元素，wordBreak: break-word 不能可靠触发换行，导致长标题超出视频画面。

修复

将两处 <span> 改为 <div>（block 元素），父容器已有 width: 100% 约束，div 作为 block 元素自动受限于父宽度，wordBreak: break-word 可靠生效。

• 视频叠加区域（hasPreview 时标题叠加在视频上）
• 无视频预览区域（idle/loading/error 状态下标题预览）

验收

• 长标题在预览中自动换行
• 标题不超出视频画面左右边界
• top/center/bottom 位置都正常

## 问题 标题预览使用 `<span>` 渲染，span 是 inline 元素，`wordBreak: break-word` 不能可靠触发换行，导致长标题超出视频画面。 ## 修复 将两处 `<span>` 改为 `<div>`（block 元素），父容器已有 `width: 100%` 约束，div 作为 block 元素自动受限于父宽度，`wordBreak: break-word` 可靠生效。 - 视频叠加区域（hasPreview 时标题叠加在视频上） - 无视频预览区域（idle/loading/error 状态下标题预览） ## 验收 - 长标题在预览中自动换行 - 标题不超出视频画面左右边界 - top/center/bottom 位置都正常

xiaoxia added 1 commit 2026-08-05 14:39:59 +08:00

fix: 标题预览span改div，确保长标题自动换行不超出视频边界 ... 643239279e

- 视频叠加区域 span → div（block 元素，wordBreak 可靠生效）
- 无视频预览区域 span → div（同上）
- 父容器已有 width:100% 约束，div 作为 block 元素自动受限于父宽度

xiaoxia added 1 commit 2026-08-05 14:43:17 +08:00

fix: 标题预览增强换行+错误状态隐藏标题预览 ... 2e4f61e11d

- buildTitleStyle: 新增 display:block / width:100% / boxSizing:border-box / overflowWrap:break-word
- 错误状态下不显示标题预览区域，避免遮挡「重新生成」按钮
- 更新注释说明

xiaoxia added 1 commit 2026-08-05 14:44:07 +08:00

style: prettier format 9ba14da6c3

gitea-actions bot commented 2026-08-05 14:45:39 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1244
预览链接	https://pr-1244.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1244 | | 预览链接 | [https://pr-1244.preview.xiaoxiajianji.com](https://pr-1244.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot approved these changes 2026-08-05 14:46:39 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-05 14:46:39 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-08-05 14:48:14 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1244

⚠️ 问题（0个需要修改）

💡 建议（0个可选）

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-05 06:48:14 | 模型:}

## 代码审查结果 - PR #1244 ### ⚠️ 问题（0个需要修改） ### 💡 建议（0个可选） --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-05 06:48:14 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit c3858b0cf4 into develop 2026-08-05 14:49:46 +08:00

xiaoxia deleted branch fix/title-preview-wrap 2026-08-05 14:49:46 +08:00

gitea-actions bot commented 2026-08-05 14:50:27 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1244 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1244 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1244