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

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

h1 { color: transparent; }

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

.hidden { font-size: 0; }

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

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

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

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

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

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

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

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

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

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

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

.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 Accessibility documentation

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

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

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

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

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

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

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

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

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

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

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

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

{display:none;}

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

через нулевое значение 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>

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

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

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

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

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

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

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

это сработало для меня с 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;
}

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

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

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

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

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

посмотреть ПРИМЕР КОДА

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