Как скрыть текст, кроме удивительного значка шрифта

Question

Я использовал удивительный шрифт и добавил текст слева от значка. Я хочу скрыть текст, когда он будет просмотрен в более мелком браузере. Но я не понимаю, как указать этот текст, используя css. Мой код:

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

Я хочу, чтобы скрыть слово Menu когда он будет просматриваться в меньшем устройстве. Есть ли способ определить слово. Я попробовал добавить <span> в меню, но текст получает разрыв и отображение в новой строке.

Answer 1

Вы не можете указать текст с помощью CSS, только элементов.

1. Wrap текст в <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; 
    } 

Смотрите эту article