如何隱藏真棒字體圖標之外的文本

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;
    }

看這篇文章