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

306

У меня есть тег в моем HTML, как это:

<h1>My Website Title Here</h1>

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

Михей
источник
3
Есть много устаревших ответов здесь: рассмотреть upvoting более недавний ответ stackoverflow.com/a/27769435/2586761 выставить его
ptim

Ответы:

426

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

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

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

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
nicholaides
источник
5
у длинных заголовков будет проблема с этим методом, поскольку только текст перед переносом слова имеет отступ, а спецификация W3C не определяет ситуацию для отрицательного отступа, так что это может привести к непредсказуемым результатам
Крис Фармилоэ,
3
Если вы используете этот метод, вы должны добавить «переполнение: скрытый», чтобы предотвратить стрельбу из поля выбора (особенно со ссылками)
willoller
4
Если у вас есть какие-либо ссылки в элементах с отрицательным отступом текста, убедитесь, что вы также указали «outline: none», иначе вы получите пунктирную границу, выходящую из левой части экрана.
Ник
9
Я предпочитаю использовать 'text-indent: -9999px;' просто чтобы убедиться, что текст действительно далеко от экрана. Немного оборонительной паранойи.
Энди Форд
4
Также добавьте «white-space: nowrap», чтобы быть в безопасности, если ваш текст длинный, только с отступом первой строки.
Эндрю Мур
177

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

h1 { color: transparent; }
nesono
источник
16
Почему нет? Потому что Google это не нравится.
alekwisnia
32
Проверка (CSS 2.1): «прозрачный» не является допустимым значением для свойства «цвет».
HasanG
15
Текст станет видимым, если пользователь его выберет (STRG + A и т. Д.) - это выглядит очень непрофессионально! Привет Кристофер
Кристофер Сток
24
@ HasanGürsoy и будущие googlers- «CSS3 расширяет значение цвета,
добавляя
11
color: transparent;работает вместе с user-select: none;, если вы не переопределите цвет.
stan-z
162

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

.hidden { font-size: 0; }
  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

вальк
источник
1
Это именно то, что мне было нужно. Я хотел скрыть то, что было в делении, но показать, что было в дочерних промежутках (чтобы скрыть пунктуацию между ними).
mskfisher
2
Это выглядит как наиболее логичный (читай: наименее странный) метод - однако мне интересно, насколько хорошо он поддерживается в различных браузерах? (Я могу подтвердить, что это работает в Firefox.)
Брайан Лейси
1
Он по-прежнему показывает очень маленький текст в большем количестве браузеров, чем в IE7, это не полное кросс-браузерное решение.
macguru2000
8
Я проверил трюк {font-size: 0} в Chrome 27, Firefox 17, Safari для Windows 5.1.7, Opera 12.12, IE8, IE9, IE10 - он работает во всех этих браузерах. Этот трюк лучше всего подходит, если вы не можете установить background-image для самого элемента (например, потому что вы используете плотно упакованное изображение спрайта и требуемый значок не имеет достаточного пустого отступа вокруг него), и вам необходимо использовать псевдо-селектор Например, element: after для отображения фонового изображения.
белуга
1
Это также меняет размер div, поэтому я не рекомендую это.
Стефан Бийзиттер
30

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

<h1><span>Website Title</span></h1>

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

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

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

Крис Фармилое
источник
Но не забудьте также установить атрибуты ширины и высоты для атрибута изображения - и убедитесь, что "padding" и "margin" установлены, потому что браузеры имеют разные идеи относительно того, сколько отступов / margin должен иметь тег H1.
Недостатком здесь является то, что если изображения выключены или если появляется бот, поддерживающий css, заголовок не будет виден.
Willoller
13
Важный текст, отображаемый на дисплее, вероятно, не будет пропущен поисковыми роботами и программами чтения с экрана. Вместо этого используйте текстовый отступ.
dylanfm
1
Это ничего не делает, OP может также удалить текст в заголовке. Программы чтения с экрана ничего не делают с дисплеем нет ..
Идрис Допико Пенья
23

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

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

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

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


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

Джош Крозье
источник
Это хорошо работает для добавления элемента только для чтения с экрана; однако, он не работает с исходным вопросом, где изображение должно отображаться фоновым изображением, указанным в css.
vossad01
@ vossad01 - Если вы не можете добавить другой элемент, и вы застряли с одним элементом (как в случае, который вы упомянули), то один хороший обходной путь будет использовать псевдоэлемент ... также, я разместил это ответить через 6 лет после того, как был задан первоначальный вопрос, и мой ответ был нацелен на более широкую аудиторию, так как этот вопрос, кажется, популярен.
Джош Крозье
14

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

darasd
источник
10

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

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

color:rgba(0,0,0,0)
пирс
источник
Большой! Это работает для любого цвета фона. Спасибо.
Сандип
8

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

font size: 0 !important;
Омид Ахмадяни
источник
Также стоит проверить, действительно ли !importantпункт нужен в вашем случае. В моем случае это работало нормально и без него.
Ээрик Свен Пуудист
6

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

jensimmons
источник
5
<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

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

Камалеш
источник
Обратите внимание, что использование этого метода делает текст нечитаемым для большинства программ чтения с экрана - см. Stackoverflow.com/questions/1755656/…
Джордан Лев
5

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

Jobo
источник
Пример? Я не понимаю, как z-indexотносится к background-image.
Мартинас Юсявичюс
5

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

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

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

Hans
источник
4

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

{display:none;}

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

Андрей Кротков
источник
1
Некоторые из отрицательных ответов, вероятно, имеют отношение к проблемам доступности - допустимая точка. Но в моем случае я перетаскиваю меню из сервисного меню ресторана на веб-сайт через их веб-сервис. Владелец ресторана не хочет, чтобы цены отображались (но та же услуга используется для печати актуальных меню.) Это ситуация, когда никто не хочет цены на сайте вообще. Хорошо знать все возможные подходы.
Марво
4

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

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

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

willoller
источник
3

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

Кедар
источник
3

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

Кафе Кодер
источник
3

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

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

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

itsfreshmade
источник
Я думаю, что где-то читал, что эта версия предпочтительнее, потому что отрицательный текстовый отступ заставит браузер отображать длинный блок размером 10000 пикселей (или любой другой пример, который вы используете). Изменение шрифта, как в этом примере, не приведет к тому, что браузер создаст большое поле, которое он пытается отобразить.
Гамбо
2
h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}
vencedor
источник
3
Почему есть высота строки?
SandRock
2

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

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}
<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

или скрыть использование в вашем классе CSS .hidetxt { visibility: hidden; }

Омар Керр
источник
2

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

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }
Хоссейн Гаджизаде
источник
1

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

span.hide
{
  position:fixed;
  right:-5000px;
}
Anze
источник
1

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

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

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

Я предлагаю:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

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

Франциско
источник
1

Использование нулевого значения для font-sizeи line-heightв элементе помогает мне:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>
HelpNeeder
источник
1

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

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

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

Урмила Манджарикар
источник
1

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

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }
Pegues
источник
0

Это сработало для меня с span (валидация нокаута).

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}
Karson
источник
0

Решение, которое работает для меня:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}
Себастьян Гикель
источник
-1

Лучший ответ работает для короткого текста, но если текст переносится, он просто появляется на изображении.

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

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

Смотрите пример кода

Shanimal
источник
-1
h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }
Харден Рахул
источник
3
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
Бенджамин В.