Скрыть текст с помощью 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.

---

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

• Web Accessibility Initiative (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 и т. д.

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

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 означает, что текст никогда не будет переноситься на следующую строку, текст продолжается на той же строке до a <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;
 }