Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance: ssr ellipsis effect #48205

Merged
merged 3 commits into from Apr 2, 2024
Merged

enhance: ssr ellipsis effect #48205

merged 3 commits into from Apr 2, 2024

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Apr 1, 2024

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

resolve #48200

💡 Background and solution

SSR 的时候文本是不缩起的,这导致体感上很怪异。SSR 阶段无论是否需要 js 测量 ellipsis 都先使用 css 做裁剪。等注水后再使用 js 切割:

SSR

截屏2024-04-01 12 56 13

Client

截屏2024-04-01 12 56 46

📝 Changelog

Language Changelog
🇺🇸 English Adjust Typography ellipsis logic to use CSS ellipsis in SSR to enhance user experience.
🇨🇳 Chinese 调整 Typography 的 ellipsis 使其在 SSR 阶段使用 CSS 省略以优化用户体验。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

stackblitz bot commented Apr 1, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Apr 1, 2024

👁 Visual Regression Report for PR #48205 Passed ✅

🎯 Target branch: master (4eaa664)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

Copy link
Contributor

github-actions bot commented Apr 1, 2024

Preview is ready

Copy link
Contributor

github-actions bot commented Apr 1, 2024

size-limit report 📦

Path Size
./dist/antd.min.js 336.42 KB (+136 B 🔺)
./dist/antd-with-locales.min.js 383.48 KB (+161 B 🔺)

Copy link

codesandbox-ci bot commented Apr 1, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link

codecov bot commented Apr 1, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (e665894) to head (49d0cab).
Report is 3 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #48205   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          743       743           
  Lines        12856     12859    +3     
  Branches      3364      3365    +1     
=========================================
+ Hits         12856     12859    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@zombieJ zombieJ marked this pull request as ready for review April 2, 2024 06:48
@zombieJ zombieJ merged commit 7e6678a into master Apr 2, 2024
107 checks passed
@zombieJ zombieJ deleted the enhance-ellipsis branch April 2, 2024 06:50
@zombieJ zombieJ mentioned this pull request Apr 5, 2024
16 tasks
CooperHash pushed a commit to CooperHash/ant-design that referenced this pull request Apr 10, 2024
* enhance: ssr ellipsis effect

* test: update snapshot

* chore: fix lint
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.

Paragraph一行时展开后显示不正确
3 participants