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

fix: text not shrink in flex container #980

Merged
merged 8 commits into from
Dec 16, 2021
Merged

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Dec 15, 2021

Closes #979

  • 文本 automatic minimum size 计算与浏览器不一致 #401 是同一个问题,Flex item 在进行 flex shrink 时不能小于其 automatic minimum size,当 flex item 的 child 只有文本时,应使用文本的 minimum size,浏览器当 word-break 为默认值时文本的 minimum size 等于文本中最长的 word 长度,在 dart 侧要做这个计算需要遍历文本字符,经测试性能比较差(textPainter 有个 getWordBoundary 方法可用,调的是 Flutter 文本引擎的方法),由于 issue 中的 case 比文本长度超出 container 更常见,因此更合理方案是不考虑文本的换行规则,包含文本的 Flex item 永远 shrink 到容器内部,这样的副作用是当文本有超长的 word 时与浏览器效果对不齐,Kraken 实现的是浏览器 word-break: break-all 的效果,浏览器中文本中 word 不会换行会导致文本溢出容器。

@temper357 temper357 changed the title [WIP] fix: text not shrink in flex container fix: text not shrink in flex container Dec 15, 2021
@answershuto answershuto merged commit 57419e7 into main Dec 16, 2021
@answershuto answershuto deleted the fix/text-shrink-width branch December 16, 2021 09:20
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.

文本过长时 flex shrink 计算规则不对导致溢出容器
3 participants