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

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

<h1>My Website Title Here</h1>

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

305 css
23.01.2009 01:19:06
здесь есть много устаревших ответов: рассмотрите возможность голосования более свежим ответом stackoverflow.com/a/27769435/2586761, чтобы разоблачить его
ptim 9.02.2017 00:15:11
30 ОТВЕТОВ
РЕШЕНИЕ

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

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;
}
426
6.06.2013 15:57:35
у длинных заголовков будет проблема с этим методом, поскольку отступ перед текстом
Chris Farmiloe 23.01.2009 01:34:46
Если вы используете этот метод, вы должны добавить «переполнение: скрытый», чтобы предотвратить стрельбу из поля выбора (особенно со ссылками)
willoller 23.01.2009 04:03:31
Если у вас есть какие-либо ссылки в элементах с отрицательным отступом текста, убедитесь, что вы также указали «outline: none», иначе вы получите пунктирную рамку, выходящую из левой части экрана.
nickf 23.01.2009 04:20:31
Я предпочитаю использовать 'text-indent: -9999px;' просто чтобы убедиться, что текст действительно далеко от экрана. Немного оборонительной паранойи.
Andy Ford 23.01.2009 08:15:12
Также добавьте «white-space: nowrap», чтобы быть в безопасности, если ваш текст длинный, только с отступом первой строки.
Andrew Moore 8.05.2009 13:38:09

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

{display:none;}

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

4
23.01.2009 01:24:14
Некоторые из отрицательных ответов, вероятно, имеют отношение к проблемам доступности - действительная точка зрения. Но в моем случае я перетаскиваю меню из службы меню ресторана на веб-сайт через их веб-службу. Владелец ресторана не хочет, чтобы цены отображались (но та же услуга используется для печати актуальных меню.) Это ситуация, когда никто не хочет цены на сайте вообще. Хорошо знать все возможные подходы.
Marvo 8.09.2015 06:05:21

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

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

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

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

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

30
2.07.2015 12:26:47
Но не забудьте также установить атрибуты ширины и высоты для атрибута изображения - и убедитесь, что "padding" и "margin" установлены, потому что браузеры имеют разные идеи относительно того, сколько отступов / margin должен иметь тег H1.
user19302 23.01.2009 01:28:53
Недостатком здесь является то, что если изображения выключены или если появляется бот, поддерживающий css, заголовок не будет виден.
willoller 23.01.2009 04:05:04
Важный текст в отображаемом тексте, вероятно, не будет пропущен поисковыми роботами и программами чтения с экрана. Вместо этого используйте текстовый отступ.
dylanfm 23.01.2009 04:47:34
Это ничего не делает, OP может также удалить текст в заголовке. Программы чтения с экрана ничего не делают с дисплеем нет ..
Idris Dopico Peña 21.11.2017 11:32:27

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

5
6.06.2013 16:04:34
Пример? Я не понимаю, как z-indexотносится к background-image.
Martynas Jusevičius 1.12.2019 12:19:55

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

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

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

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

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

4
23.01.2009 04:02:25

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

14
8.05.2009 10:54:52

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

6
6.06.2013 16:00:47

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

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

161
14.05.2017 19:29:38
Это именно то, что мне было нужно. Я хотел скрыть то, что было в делении, но показать, что было в дочерних промежутках (чтобы скрыть пунктуацию между ними).
mskfisher 29.09.2011 23:24:29
Это выглядит как наиболее логичный (читай: наименее странный) метод - однако мне интересно, насколько хорошо он поддерживается в различных браузерах? (Я могу подтвердить, что это работает в Firefox.)
Brian Lacy 27.04.2012 17:34:16
Он по-прежнему показывает очень маленький текст в большем количестве браузеров, чем просто в IE7, это не полное кросс-браузерное решение.
macguru2000 25.10.2012 23:47:17
Я проверил трюк {font-size: 0} в Chrome 27, Firefox 17, Safari для Windows 5.1.7, Opera 12.12, IE8, IE9, IE10 - он работает во всех этих браузерах. Этот трюк лучше всего подходит, если вы не можете установить background-image для самого элемента (например, потому что вы используете плотно упакованное изображение спрайта, а требуемый значок не имеет достаточного пустого отступа вокруг него) и должны использовать псевдо-селектор Например, element: after для отображения фонового изображения.
beluga 22.01.2013 15:35:51
Это также меняет размер div, поэтому я не рекомендую это.
Stephan Bijzitter 26.03.2015 08:42:08
<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

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

5
3.07.2011 09:52:28
Обратите внимание, что использование этого метода делает текст недоступным для чтения большинству программ чтения с экрана - см. Stackoverflow.com/questions/1755656/…
Jordan Lev 9.11.2011 03:26:53

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

h1 { color: transparent; }
177
4.11.2011 22:49:03
Почему бы нет? Потому что Google это не нравится.
alekwisnia 2.04.2012 09:43:34
Проверка (CSS 2.1): «прозрачное» не является допустимым значением для свойства «цвет».
HasanG 20.04.2012 23:11:44
Текст станет видимым, если пользователь его выберет (STRG + A и т. Д.) - это выглядит очень непрофессионально! Привет Кристофер
Christopher Stock 27.11.2013 14:39:20
@ HasanGürsoy и будущие googlers- «CSS3 расширяет значение цвета,
ABMagil 2.07.2014 13:22:50
color: transparent;работает вместе с user-select: none;, если вы не переопределите цвет.
stan-z 13.03.2017 09:37:32
h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}
2
26.01.2012 17:11:46
Почему есть высота строки?
SandRock 27.05.2014 09:24:59

Если мы сможем отредактировать разметку, жизнь станет проще, просто удали текст и будь счастлив. Но иногда разметка была размещена с помощью кода 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
29.10.2012 02:02:59

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

span.hide
{
  position:fixed;
  right:-5000px;
}
1
3.05.2012 08:45:13

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

3
7.06.2012 14:53:26

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

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

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

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

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

5
6.08.2014 13:21:46

Это сработало для меня с 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;
}
0
30.08.2013 03:15:24

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

3
19.06.2014 08:49:41

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

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

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

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

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

20
14.11.2014 15:01:17

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

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

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

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

-1
16.01.2015 00:05:24

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

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;
}
0
16.12.2014 21:34:56

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

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

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

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

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


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

23
23.05.2017 10:31:37
Это хорошо работает для добавления элемента только для чтения с экрана; однако, это не работает с исходным вопросом, где изображение должно отображаться фоновым изображением, указанным в css.
vossad01 29.05.2017 02:59:15
@ vossad01 - Если вы не можете добавить еще один элемент, и вы застряли с одним элементом (как в случае, о котором вы упоминали), то одним из хороших обходных путей будет использование псевдоэлемента ... также я разместил это ответить через 6 лет после того, как был задан первоначальный вопрос, и мой ответ был нацелен на более широкую аудиторию, так как этот вопрос кажется популярным.
Josh Crozier 29.05.2017 03:08:31

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

.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
17.04.2015 03:21:40

Использование нулевого значения для 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>
1
5.01.2016 20:07:07

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

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

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

1
17.02.2016 10:00:26
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;
 }
-1
16.03.2016 05:52:13
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
Benjamin W. 16.03.2016 06:25:08

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

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

color:rgba(0,0,0,0)
10
12.08.2016 20:38:45
Большой! Это работает для любого цвета фона. Спасибо.
Sandeep Amarnath 27.12.2019 21:52:03

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

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

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

3
22.05.2017 14:28:52
Я думаю, что где-то читал, что эта версия предпочтительнее, потому что отрицательный текстовый отступ приведет к тому, что браузер отобразит окно длиной 10000 пикселей (или любой другой пример). Изменение шрифта, как в этом примере, не приведет к тому, что браузер создаст большое поле, которое он пытается отобразить.
Gambo 2.06.2019 08:14:07

перезаписать содержимое с помощью CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }
2
3.07.2017 08:55:56

Один из способов добиться этого - использовать :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;
    }
1
26.02.2018 16:05:47

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

font size: 0 !important;
7
24.01.2019 07:36:07
Также стоит проверить, действительно ли !importantпункт нужен в вашем случае. В моем случае это работало нормально и без него.
Eerik Sven Puudist 15.04.2020 21:16:08