Skip to content

fix(index): clamp app card title to prevent overflow - #631

Merged
deepin-bot[bot] merged 1 commit into
linuxdeepin:masterfrom
dengzhongyuan365-dev:master
Jul 1, 2026
Merged

fix(index): clamp app card title to prevent overflow#631
deepin-bot[bot] merged 1 commit into
linuxdeepin:masterfrom
dengzhongyuan365-dev:master

Conversation

@dengzhongyuan365-dev

@dengzhongyuan365-dev dengzhongyuan365-dev commented Jul 1, 2026

Copy link
Copy Markdown
Member

Restore CSS line clamp for app card titles with centered layout and word wrapping, preventing long English names from overflowing the card background while keeping the previous auto-centering behavior.

恢复应用卡片标题的CSS两行截断,并保持居中与长词换行能力。
避免英文长名称超出卡片背景,同时保留此前为多语言显示调整的自动居中效果。

bug-368193

Log: 恢复应用卡片标题CSS截断修复英文长名称超出背景
PMS: BUG-359981
Influence: 应用卡片标题超过两行时省略显示,解决长英文名称溢出问题,不影响图标与卡片点击功能。

Summary by Sourcery

Bug Fixes:

  • Prevent long app card titles from overflowing the card background by re-enabling CSS line clamping and word wrapping.

Restore CSS line clamp for app card titles with centered layout and
word wrapping, preventing long English names from overflowing the card
background while keeping the previous auto-centering behavior.

恢复应用卡片标题的CSS两行截断,并保持居中与长词换行能力。
避免英文长名称超出卡片背景,同时保留此前为多语言显示调整的自动居中效果。

bug-368193

Log: 恢复应用卡片标题CSS截断修复英文长名称超出背景
PMS: BUG-359981
Influence: 应用卡片标题超过两行时省略显示,解决长英文名称溢出问题,不影响图标与卡片点击功能。
@sourcery-ai

sourcery-ai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Restores two-line clamping and centering for app card titles in the manual index view to prevent long English names from overflowing, while preserving multi-line layout and word wrapping behavior.

File-Level Changes

Change Details Files
Re-enable CSS multi-line clamp and centering for app card titles to prevent text overflow.
  • Set the title container to use -webkit-box display with vertical orientation and a two-line clamp to restore multi-line truncation.
  • Add overflow-wrap: break-word to ensure long unbroken words wrap instead of overflowing the card background.
  • Center text within the title area to preserve the previous auto-centering behavior with the clamped layout.
src/web/toManual/sass/index.scss
src/web_dist/toManual/index.css

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've left some high level feedback:

  • Consider whether word-break: normal plus overflow-wrap: break-word still meets requirements for non-space-separated languages (e.g., CJK) since the previous behavior around long words and mixed-language titles may change.
  • You’re now relying on display: -webkit-box and -webkit-line-clamp: 2; if non-WebKit browsers need to be supported, consider adding a graceful fallback for multi-line truncation or verifying the behavior there.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Consider whether `word-break: normal` plus `overflow-wrap: break-word` still meets requirements for non-space-separated languages (e.g., CJK) since the previous behavior around long words and mixed-language titles may change.
- You’re now relying on `display: -webkit-box` and `-webkit-line-clamp: 2`; if non-WebKit browsers need to be supported, consider adding a graceful fallback for multi-line truncation or verifying the behavior there.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dengzhongyuan365-dev, lzwind

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

2 similar comments
@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dengzhongyuan365-dev, lzwind

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: dengzhongyuan365-dev, lzwind

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@deepin-ci-robot

Copy link
Copy Markdown

deepin pr auto review

★ 总体评分:95分

■ 【总体评价】

代码精准修复了多行文本截断失效及未居中的样式缺陷
逻辑完全正确且无任何安全隐患,符合满分标准仅作微调扣分

■ 【详细分析】

  • 1.语法逻辑(完全正确)✓

修改了 src/web/toManual/sass/index.scss.content 类的样式,取消了 display: -webkit-box; 的注释,补充了 overflow-wrap: break-word;text-align: center;,CSS属性值和语法完全符合规范
建议:保持当前的属性书写顺序,符合标准层叠规则

  • 2.代码质量(良好)✓

删除了历史遗留的无效注释代码,使样式表更加整洁,同时通过 text-align: center; 配合 margin: auto; 实现了文本居中,替代了早期不稳定的 margin-left 方案
建议:无

  • 3.代码性能(无性能问题)✓

纯CSS样式修改,仅涉及浏览器渲染层的布局计算与文本截断,不涉及重绘回流的性能瓶颈
建议:无

  • 4.代码安全(存在0个安全漏洞)✓

漏洞对比统计:新增漏洞 0 个,减少漏洞 0 个,持平 0 个
纯前端样式表修改,不涉及动态脚本执行、数据请求或DOM操作,无攻击面

  • 建议:无需额外安全修复措施

■ 【改进建议代码示例】

// 当前代码已足够优秀,无需额外改进,以下为保持现有逻辑的最佳实践展示
.content {
  width: var(--index-span-width);
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-align: center;
  font-family: var(--nav-world-font-family);
  font-size: var(--span-font-size);
  line-height: var(--span-line-height);
}

@dengzhongyuan365-dev

Copy link
Copy Markdown
Member Author

/forcemerge

@deepin-bot

deepin-bot Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

This pr force merged! (status: unstable)

@deepin-bot
deepin-bot Bot merged commit a94efdc into linuxdeepin:master Jul 1, 2026
18 of 20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants