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

Question

我使用真棒字體並在圖標左側添加文字。我想在較小的瀏覽器中瀏覽文本時隱藏文本。但我不明白如何使用CSS指向該文本。我的代碼是：

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

我想隱藏字Menu時，它會在較小的設備進行瀏覽。有沒有什麼方法可以確定這個詞。我嘗試在菜單中添加<span>，但文本中斷並以新行顯示。

Answer 1

你不能指向帶CSS的文本，只能指向元素。

1. 裹在<span>
2. 文本查找觸發你嘗試過跨度換行CSS和修復
3. Restyle跨度隱藏文本（例如，通過調整大小和設置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; 
    } 

看到這個article