如何隐藏真棒字体图标之外的文本

Question

我使用了很棒的字体，并在图标左侧添加了文字。 在较小的浏览器中浏览文本时，我想隐藏它。 但是我不明白如何使用CSS指向该文本。 我的代码是：

<button class="slideout-menu-toggle"><i class="fa fa-bars"></i> Menu</button>

我想在较小的设备中浏览Menu时隐藏“ Menu ”一词。 有什么办法可以确定这个词。 我尝试在菜单中添加<span> ，但文本中断并以换行显示。

Answer 1

您不能使用CSS指向仅包含元素的文本。

1. 将文字换成<span>
2. 找到触发您尝试过的跨度上的换行符的CSS并进行修复
3. 当媒体查询与所需的窗口宽度匹配时，重新设置跨度以隐藏文本（例如，通过调整文本大小并设置overflow: hidden ）

Answer 2

尝试此操作，我添加了一个跨度，但没有中断文本。

 @media screen and (max-width: 500px) { .slideout-menu-toggle > span{ display:none; } } 

 <button class="slideout-menu-toggle"><i class="fa fa-bars"></i> <span>Menu</span></button> 

Answer 3

显示：也不会从屏幕阅读器中隐藏文本。 改为使用

{
text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

看这篇文章