fix: label支持自动换行- #3409
fix: label支持自动换行- #3409
Conversation
github-actions
bot
added
action:review
Walkthrough表单项标签样式调整，将两个选择器的 Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 分钟 Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3409 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/formitem/formitem.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (1)
src/packages/formitem/formitem.scss (1)
142-142: 标签顶部位置应添加word-wrap: break-word为左右对齐标签添加
word-wrap: break-word是正确的，但存在布局位置间的不一致性。.nut-form-item-label-top（顶部标签）缺少此属性，而.nut-form-item-label-left和.nut-form-item-label-right都已添加。建议在.nut-form-item-label-top中也添加word-wrap: break-word以保持所有标签位置的换行行为一致。
| justify-content: flex-end; | ||
| padding-right: 24px; | ||
| white-space: nowrap; | ||
| word-wrap: break-word; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check if file exists and get basic info
if [ -f "src/packages/formitem/formitem.scss" ]; then
echo "File found"
wc -l "src/packages/formitem/formitem.scss"
else
echo "File not found, searching for similar files"
fd "formitem.*scss" -t f
fiRepository: jdf2e/nutui-react
Length of output: 111
🏁 Script executed:
# Read the relevant sections of the file to verify the changes
# Reading around lines 136 and 142 (the changed lines)
sed -n '10,25p' src/packages/formitem/formitem.scss | cat -n
echo "---"
sed -n '130,155p' src/packages/formitem/formitem.scss | cat -nRepository: jdf2e/nutui-react
Length of output: 1244
🏁 Script executed:
# Search for all occurrences of word-wrap, white-space, and overflow-wrap in the file
echo "=== word-wrap occurrences ==="
rg -n "word-wrap" src/packages/formitem/formitem.scss
echo "=== white-space occurrences ==="
rg -n "white-space" src/packages/formitem/formitem.scss
echo "=== overflow-wrap occurrences ==="
rg -n "overflow-wrap" src/packages/formitem/formitem.scssRepository: jdf2e/nutui-react
Length of output: 271
🏁 Script executed:
# Get the git diff for this file
git diff HEAD -- src/packages/formitem/formitem.scss | head -100Repository: jdf2e/nutui-react
Length of output: 43
🏁 Script executed:
# If that doesn't show recent changes, check git log
git log --oneline -n 20 -- src/packages/formitem/formitem.scssRepository: jdf2e/nutui-react
Length of output: 87
🏁 Script executed:
# Show the actual commit with changes
git show 68aa0853 -- src/packages/formitem/formitem.scssRepository: jdf2e/nutui-react
Length of output: 4240
移除 136 行和 142 行的冗余 word-wrap 声明
这是一个新文件创建。第 18 行的父选择器 .nut-form-item-label 已经设置了 word-wrap: break-word，子选择器 .nut-form-item-label-right（第 136 行）和 .nut-form-item-label-left（第 142 行）无需重复声明该属性——它们会自动继承父样式。
建议删除第 136 行和 142 行的 word-wrap: break-word;，保持样式表的整洁。同时可考虑使用更现代的 CSS 属性 overflow-wrap: break-word 替代第 18 行的 word-wrap（两者功能相同，但 overflow-wrap 是标准属性）。
第 148 行的 .nut-form-item-top 中的 white-space: nowrap 是独立的样式设置，用于列布局的特定场景，与换行功能无直接关系。
🤖 Prompt for AI Agents
In src/packages/formitem/formitem.scss around lines 136 and 142, remove the
redundant "word-wrap: break-word;" declarations from the child selectors
.nut-form-item-label-right (line 136) and .nut-form-item-label-left (line 142);
instead rely on the parent .nut-form-item-label rule (line 18) for wrapping;
additionally, replace the parent rule's non-standard "word-wrap: break-word" at
line 18 with the standard "overflow-wrap: break-word" to modernize the
stylesheet while keeping .nut-form-item-top (line 148) untouched.
1 participant
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发版说明
✏️ Tip: You can customize this high-level summary in your review settings.