如何在小屏幕上隐藏标签？

Question

我有一个带有标签和图标的 antd 菜单。 这是设计的最小表示。 Codesandbox

现在我想要的是当菜单开始显示省略号时隐藏标签，只显示图标。由于我对 CSS 不太熟悉，我想知道是否可以通过 antd 来实现这个功能。

Answer 1

您需要使用媒体查询，并在特定尺寸以下将标签设置为display none。

@media only screen and (max-width : 768px) {
    span.ant-menu-title-content {
    display: none;
    }
}

我个人建议您使用上面这个（它是在桌面和移动设备之间切换最常用的方法）

最后，请考虑使用justify-content: center来在移动设备上将菜单项居中显示 :)