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

Ответ 1

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

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;
}

Ответ 2

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

h1 { color: transparent; }

Ответ 3

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

.hidden { font-size: 0; }

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

Ответ 4

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

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

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

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

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

Ответ 5

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

.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/

Ответ 6

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

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

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

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

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

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

• Инициатива доступности веб-сайтов (WAI)

• Документация доступности MDN

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

color:rgba(0,0,0,0)

Ответ 10

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

{display:none;}

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

Ответ 11

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

Ответ 12

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

Вышеупомянутое хорошо работает и в последнем Thunderbird.

Ответ 13

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

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

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

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

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

Ответ 14

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

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

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

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

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

Ответ 15

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

Ответ 16

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Ответ 17

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

Ответ 18

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

.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 standard dummy text ever since the 1500s, when</p>
</div>

Ответ 19

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

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Ответ 20

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

Ответ 21

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

span.hide
{
  position:fixed;
  right:-5000px;
}

Ответ 22

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

Ответ 23

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

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

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

Ответ 24

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

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

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

Ответ 25

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

Ответ 26

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

<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;
}

Ответ 27

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

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;
}

Ответ 28

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

font size: 0 !important;

Ответ 29

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

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

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

См. КОД ОБРАЗЦА

Ответ 30

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;
 }