Как скрыть текст в css

Скрыть текст с помощью css

используя css, я хочу заменить текст моим фактическим логотипом. У меня нет проблем с логотипом, изменив размер тега и поместив фоновое изображение через css. Однако я не могу понять, как избавиться от текста. Я видел это раньше, в основном, выталкивая текст с экрана. Проблема в том, что я не могу вспомнить, где я его видел.

29 ответов

Это один из способов:

здесь еще один способ чтобы скрыть текст, избегая при этом огромное поле 9999 пикселей, которое браузер создаст:

почему бы просто не использовать:

просто добавить font-size: 0; к вашему элементу, который содержит текст.

самый кросс-браузерный дружественный способ-написать HTML как

затем используйте CSS, чтобы скрыть промежуток и заменить изображение

Если вы можете использовать CSS2, то есть несколько лучших способов использования content свойство,но, к сожалению, веб еще не 100% там.

Джеффри Зельдман предлагает следующее решение:

это должно быть менее ресурсоемким, чем -9999px;

пожалуйста, читайте об этом здесь:

скрытие текста с учетом доступности:

В дополнение к другим ответы, а вот еще один полезный подход для скрытия текста.

этот метод эффективно скрывает текст, но позволяет оставаться видимым для чтения с экрана. Это вариант для рассмотрения, если доступность является проблемой.

стоит отметить, что этот класс используется в настоящее время в Bootstrap 3.

Если вы заинтересованы в чтении о доступности:

посмотреть mezzoblue для хорошего резюме каждой техники, с сильными и слабыми сторонами, а также пример html и css.

не используйте < display:none; >Это делает контент недоступен. Вы хотите, чтобы читатели экрана видели ваш контент и визуально стилизовали его, заменив текст изображением (например, логотипом). Используя text-indent: -999px; или аналогичный метод, текст все еще есть — просто визуально нет. Использовать display:none , и текст пропал.

так много сложных решений.

самый простой-просто использовать:

вы можете использовать css background-image собственность и z-index чтобы изображение оставалось перед текстом.

почему бы вам не использовать:

Если у вас нет элемента span или div, он отлично работает для ссылок.

ответ заключается в создании промежутка со свойством

вы можете найти пример в этот сайт

Это на самом деле область созрела для обсуждения, со многими тонкими методами, доступными. Важно, чтобы вы выбрали / разработали технику, которая отвечает вашим потребностям, включая: считыватели экрана, комбинации изображений/css/сценариев включения / выключения, seo и т. д.

вот некоторые хорошие ресурсы, чтобы начать работу по дороге замены изображения standardista техники:

выше также хорошо работает в последнем Thunderbird.

используйте тег условия для другого браузера и используя css, который вы должны разместить height:0px и width:0px также вы должны поставить font-size:0px .

если дело просто в том, чтобы сделать текст внутри элемента невидимым, установите атрибут color на 0 непрозрачность, используя значение rgba, такое как color:rgba(0,0,0,0); чистый и простой.

попробуйте этот код, чтобы сократить и Скрыть текст

или скрыть использование в вашем классе css .hidetxt

repalce содержание с CSS

Я обычно использую:

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

мы не можем поставить <span> обертывание текста и скрытие всего тега. Кстати, некоторые браузеры не только скрывают элементы с помощью display:none но также отключает компоненты внутри.

и font-size:0px и color:transparent может быть хорошо решения, но некоторые браузеры их не понимают. Мы не можем на них положиться.

используя overflow:hidden обеспечивает нашу ширину и высоту. Некоторые браузеры (не будут их называть. IE) может читать ширину и высоту как min-width и min-height . Я хочу предотвратить расширение коробки.

через нулевое значение font-size и line-height в элементе делает трюк для меня:

чтобы скрыть текст из html, используйте свойство text-indent в css

/ * для динамического текста вам нужно добавить пробел, чтобы ваш примененный css не беспокоил. nowrap означает, что текст никогда не будет переноситься на следующую строку, текст продолжается на той же строке до <br> встречается тег

Я не помню, где я взял это, но успешно использовал его в течение многих лет.

мой mixin находится в sass, однако вы можете использовать его так, как считаете нужным. Для хорошей меры я обычно держу .hidden класса где-то в моем проекте, чтобы прикрепить к элементам, чтобы избежать дублирования.

один из способов добиться этого-использовать :before или :after . Я использовал этот подход в течение нескольких лет и особенно отлично работает с векторными значками глифа.

Показать и скрыть текст или изображения с помощью CSS и JavaScript

Динамический HTML (DHTML) позволяет создавать приложения в стиле приложений на ваших сайтах, уменьшая частоту полной загрузки целых страниц. В приложениях, когда вы нажимаете на что-либо, приложение немедленно изменяется, чтобы показать это конкретное содержимое или предоставить вам ваш ответ.

Напротив, веб-страницы обычно должны быть перезагружены, или должна быть загружена вся новая страница. Это может сделать пользовательский опыт более разобщенным. Ваши клиенты должны ждать загрузки первой страницы, а затем снова ждать загрузки второй страницы и так далее.

С помощью
улучшить опыт просмотра

Используя DHTML, один из самых простых способов улучшить это &#8211; включить или выключить элементы div для отображения контента при его запросе. Элемент div определяет логическое разделение на вашей веб-странице. Думайте о div как о блоке, который может содержать абзацы, заголовки, ссылки, изображения и даже другие div.

Что вам нужно

Для того чтобы создать div, который можно включать и выключать, вам необходимо следующее:

  • Ссылка для управления div путем включения и выключения при нажатии.
  • Див, чтобы показать и скрыть.
  • CSS для стилизации div скрытый или видимый.
  • JavaScript для выполнения действия.

Управляющая ссылка

Контрольная ссылка &#8211; самая простая часть. Просто создайте ссылку, как вы бы на другую страницу. Пока оставьте атрибут href пустым.

Разместите это где-нибудь на своей веб-странице.

Див, чтобы показать и скрыть

Создайте элемент div, который хотите показать и скрыть. Убедитесь, что у вашего div есть уникальный идентификатор. В этом примере уникальным идентификатором является Learn HTML .

CSS, чтобы показать и скрыть Div

Создайте два класса для вашего CSS: один, чтобы скрыть div, а другой, чтобы показать его. У вас есть два варианта для этого: отображение и видимость.

Display удаляет div из потока страниц, а видимость просто меняет его вид. Некоторые кодеры предпочитают display , но иногда visibility также имеет смысл. Например:

Если вы хотите использовать видимость, измените эти классы на:

Добавьте скрытый класс в ваш div, чтобы он начинался как скрытый на странице:

JavaScript, чтобы заставить его работать

Все, что делает этот скрипт, это смотрит на текущий класс, установленный в вашем div, и переключает его на unhidden, если он помечен как скрытый, или наоборот.

Это всего лишь несколько строк JavaScript. Поместите следующее в заголовок вашего HTML-документа (перед тегом:

Что делает этот скрипт, строка за строкой:

Вызывает функцию unhide , а divID является точным уникальным идентификатором, который вы хотите показать или скрыть.

Устанавливает переменную i tem со значением вашего div.

Выполняет простую проверку браузера; если браузер не поддерживает getElementById , этот скрипт не будет работать.

Проверяет класс на div. Если он скрыт , он заменяет его на unhidden . В противном случае он заменяет его на скрытый .

Закрывает оператор if .

Чтобы скрипт работал, нужно сделать еще одну вещь. Вернитесь к своей ссылке и добавьте javascript в атрибут href. Обязательно используйте точный уникальный идентификатор, который вы назвали своим div в этом href:

Поздравляем! Теперь у вас есть div, который будет отображаться и скрываться при каждом нажатии на ссылку.

Возможные проблемы, которые нужно остерегаться

Этот сценарий не является надежным. В некоторых ситуациях это может вызвать проблемы для вас:

JavaScript не включен. Если у ваших читателей нет JavaScript или он отключен, этот скрипт не будет работать. Скрытые элементы остаются скрытыми независимо от того, что делают ваши читатели.Один из способов исправить это &#8211; поместить скрытые элементы div в область noscript, но вам придется поэкспериментировать с этим, чтобы они правильно отображались.

Слишком много контента. Это может быть отличным инструментом, позволяющим вашим читателям видеть только тот контент, который им нужен, но если вы поместите слишком много в скрытые элементы div, это может существенно повлиять на загрузку страницы. Помните, что, несмотря на то, что контент не отображается, веб-браузер все еще загружает его, поэтому будьте внимательны, сколько контента вы скрываете.

Клиенты не понимают. Наконец, клиенты могут не привыкать нажимать на ссылку, которая показывает или скрывает контент. Поиграйте с иконками (плюс знаки и стрелки работают хорошо) или текстом, чтобы объяснить, что будет с вашими клиентами. Другое решение &#8211; оставить один из элементов div открытым, а остальные &#8211; закрытым. Это может донести идею до ваших клиентов, чтобы они могли быстрее понять, как открыть оставшийся контент.

Вы всегда должны тестировать динамический HTML таким образом со своими клиентами. Как только вы почувствуете, что они могут понять и использовать его, это может стать отличным способом получения большого количества контента на ваших веб-страницах, не занимая много видимого пространства.

Скрыть текст с помощью CSS

Используя CSS, я хочу заменить текст своим настоящим логотипом. У меня есть логотип там без проблем путем изменения размера тега и вставки фонового изображения через CSS. Однако я не могу понять, как избавиться от текста. Я видел это раньше, в основном, толкая текст с экрана. Проблема в том, что я не могу вспомнить, где я это видел.

Это один из способов:

Вот еще один способ скрыть текст, избегая огромного 9999 пиксельного поля, которое создаст браузер:

Почему бы просто не использовать:

Просто добавьте font-size: 0; к своему элементу, который содержит текст.

Наиболее удобный для браузера способ — написать HTML как

затем используйте CSS, чтобы скрыть промежуток и заменить изображение

Если вы можете использовать CSS2, то есть несколько лучших способов использования этого content свойства, но, к сожалению, веб еще не на 100%.

Скрытие текста с учетом доступности:

В дополнение к другим ответам, здесь есть еще один полезный подход для сокрытия текста.

Этот метод эффективно скрывает текст, но позволяет ему оставаться видимым для программ чтения с экрана. Это вариант для рассмотрения, если доступность является проблемой.

Стоит отметить, что этот класс в настоящее время используется в Bootstrap 3 .

Если вы заинтересованы в чтении о доступности:

Джеффри Зельдман предлагает следующее решение:

Это должно быть менее ресурсоемким, чем -9999px;

Пожалуйста, прочитайте все об этом здесь:

См. Mezzoblue для хорошего обзора каждой техники, с сильными и слабыми сторонами, а также с примерами html и css.

Так много сложных решений.

Самый простой — просто использовать:

Вы можете просто скрыть свой текст, добавив этот атрибут:

Не использовать < display:none; >Это делает содержимое недоступным. Вы хотите, чтобы программы чтения с экрана могли видеть ваш контент и визуально оформлять его, заменяя текст изображением (например, логотипом). Используя text-indent: -999px; или подобный метод, текст все еще там — только не визуально там. Используйте display:none , и текст исчез.

Вышесказанное хорошо работает и в последней версии Thunderbird.

Вы можете использовать background-image свойство css и z-index убедиться, что изображение остается перед текстом.

Почему вы не используете:

Если у вас нет элемента span или div, он отлично работает для ссылок.

Ответ состоит в том, чтобы создать промежуток со свойством

Вы можете найти пример на этом сайте

Это на самом деле область, созревшая для обсуждения, со многими тонкими доступными методами. Важно, чтобы вы выбрали / разработали технику, которая соответствует вашим потребностям, включая: программы чтения с экрана, комбинации изображений / CSS / сценариев вкл / выкл, SEO и т. Д.

Вот несколько хороших ресурсов для начала работы над методами замены стандартных изображений:

Используйте тег условия для другого браузера и используйте CSS, который вы должны разместить, height:0px а width:0px также вы должны разместить font-size:0px .

Если цель состоит в том, чтобы просто сделать текст внутри элемента невидимым, установите для атрибута color значение непрозрачности 0, используя значение rgba, например, color:rgba(0,0,0,0); clean and simple.

Я не помню, где я взял это, но использовал это успешно целую вечность.

Мой миксин в sass, но вы можете использовать его так, как считаете нужным. Для хорошей меры я обычно держу .hidden класс где-нибудь в своем проекте, чтобы присоединить к элементам, чтобы избежать дублирования.

Попробуйте этот код, чтобы сократить и скрыть текст

или скрыть использование в вашем классе CSS .hidetxt

вернуть содержимое с помощью CSS

Я обычно использую:

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

Мы не можем поместить <span> перенос текста и скрыть весь тег. Кстати, некоторые браузеры не только скрывают элементы с display:none но и отключают компоненты внутри.

Оба font-size:0px и color:transparent могут быть хорошими решениями, но некоторые браузеры их не понимают. Мы не можем полагаться на них.

Использование overflow:hidden обеспечивает нашу ширину и высоту. Некоторые браузеры (не будут называть их . IE ) могут считывать ширину и высоту как min-width и min-height . Я хочу предотвратить увеличение коробки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *