Grid布局中遇到的问题

最新推荐文章于 2026-04-03 12:46:52 发布

原创最新推荐文章于 2026-04-03 12:46:52 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS案例专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在使用Grid布局时，如何保持文字右对齐并在内容过长时实现省略号显示。关键在于设置容器宽度、overflow和子项目的max-width，确保文本整洁显示。

                    
                    Grid布局中，文字居右对齐，当文字太长时，没有办法将…显示在文字最后。

由于子项目用了 justify-self: end;  当文字太长，超过grid的预设宽度时，会撑开空白区域，如果要让…在文字最后显示，则需要在grid容器中设置预设的width, overflow设置成hidden, 并在子项目中设置max-width.width: 160px;
overflow: hidden;

max-width: 112px;
justify-self: end;