{ hide_text } Сводный отчет о скрытии текста CSS

{ hide_text } Сводный отчет о скрытии текста CSS

Демо сокрытия текста CSS , которое я недавно скомпилировал, суммировало несколько методов, надеясь найти наиболее идеальное решение и поместить его в свои собственные фрагменты кода. Однако в конце концов я попал в ситуацию, когда вывод неоднократно отменялся. Поскольку существует так много сценариев приложений и элементов, которые необходимо учитывать, независимо от браузера, разные терминалы приложений и разные структуры тегов будут иметь разные оптимальные решения. Поэтому вместо того, чтобы надеяться на более «ленивый» подход к работе, лучше. как обычно, консолидировать и накапливать базовые знания, чтобы вы могли быть более удобны, когда вам нужно пойти на компромисс.

Поскольку у меня мало опыта, в демо-части неизбежно будут ошибки и упущения. Если вы обнаружите какие-либо проблемы, я надеюсь, вы сможете на них указать.

Демонстрационный список методов

1. Без резервирования: отображение: нет

Фрагмент кода:

(х)HTML

<p class="hide_display">Я — текст в соевом соусе</p>

CSS

/* Сокрытие насилия*/
.hide_display{дисплей:нет;}

совместимость:

преимущество:

• Удобно и быстро
• Хорошая совместимость

недостаток:

• Программа чтения с экрана не может читать
• Гиперссылки не применимы
• Для альтернативного текста изображения требуется фон других ярлыков.
• Влияние на рейтинг в поиске
• Широкое использование можно легко считать SEO-обманом.

2. Компромиссный выбор: переполнение: скрыто/позиция: абсолютное/видимость: скрыто.

Фрагмент кода:

(х)HTML

<span class="hide_overflow">Я — текст соевого соуса №1</span>
<p class="hide_position">Текст соевого соуса «Я номер 2»</p>
<p class="hide_visibility">Текст соевого соуса «Я №3»</p>

CSS

/* Скрываем элемент и отделяем его от потока текста, чтобы элемент не влиял на другие элементы */
.hide_overflow{
высота: 0 пикселей;
переполнение: скрыто;
display:block;/* Требуются встроенные элементы*/
float:left; /* Выход из потока документов или позиции:absolute;*/
}
/* Располагаем вне видимого диапазона, вне потока текста, чтобы элемент не влиял на другие элементы*/
.hide_position{
позиция: абсолютная;
слева: -32767 пикселей;
}
/* Принцип тот же, что и для .hide_position*/
.hide_visibility{
видимость: скрыта;
позиция:absolute; /* Выйти из документооборота*/
поле слева:-32767 пикселей;
}