过长的分类名称导致 CSS 布局问题

我在测试用于修改 Discourse 页面 404 的 CSS 时发现了一些问题。

所有截图均在 safe-mode 模式下制作,尚未添加任何自定义样式表,且仅安装了官方插件。

我创建了名称非常长(50 个字符,这是 Discourse 默认限制)以及非常短或正常的类别和子类别,以测试 404 页面中 CSS 的渲染效果。

以下是存在的问题:

类别样式设置为 none



如果类别名称极长,无论是在首页还是在汉堡菜单中,名称都无法正确截断。
通过在浏览器控制台中快速搜索发现,.badge-wrapper.none span.badge-category 及其相关的 CSS 设置在 Discourse 样式表中缺失。

类别样式设置为 bullet

如果类别名称极长,项目符号会失去其方形外观(此问题同样存在于 自定义 404 页面 中)。请注意,这是一个父类别。
我认为问题出在 .badge-wrapper.bullet 上设置了 display: inline-flex

我知道很少有网站会创建如此长名称(50 个字符)的类别,但既然允许这样做,这些布局错误就必须得到修正。

v1.9.0.beta8 +100

3 个赞