Menyembunyikan teks dengan menggunakan css

Ini adalah salah satu cara:

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 */
}

Berikut ini adalah cara lain untuk menyembunyikan teks sambil menghindari besar 9999 pixel kotak itu browser akan membuat:

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

Mengapa tidak hanya menggunakan:

h1 { color: transparent; }

Hanya menambahkan font-size: 0; untuk elemen yang berisi teks.

.tersembunyi { font-size: 0; }

font-size: 0; menyembunyikan teks. Anda dapat't see me :)

Yang paling cross-browser yang cocok untuk cara ini adalah untuk menulis HTML sebagai

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

kemudian menggunakan CSS untuk menyembunyikan span dan mengganti gambar

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

Jika anda dapat menggunakan CSS2, maka ada beberapa cara yang lebih baik menggunakan content properti, tapi sayangnya web isn't 100% belum ada.

Menyembunyikan teks dengan aksesibilitas di pikiran:

Selain jawaban yang lain, di sini adalah pendekatan yang berguna untuk menyembunyikan teks.

Metode ini efektif menyembunyikan teks, namun memungkinkan untuk tetap terlihat untuk pembaca layar. Ini adalah pilihan untuk mempertimbangkan jika aksesibilitas adalah kekhawatiran.

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

It's worth menunjukkan bahwa kelas ini saat ini digunakan di Bootstrap 3.

Jika anda're tertarik untuk membaca tentang aksesibilitas:

• Web Accessibility Initiative (WAI)

• MDN Aksesibilitas dokumentasi

Jeffrey Zeldman menunjukkan solusi berikut:

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

Itu harus menjadi sumber daya yang kurang intensif dari -9999px;

Silahkan baca semua tentang hal itu di sini:

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

Lihat mezzoblue untuk ringkasan yang bagus dari masing-masing teknik, dengan kekuatan dan kelemahan, plus contoh html dan css.

Begitu banyak solusi yang rumit.

Yang termudah adalah hanya menggunakan:

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

Jangan gunakan { display:none; } Itu membuat konten yang dapat diakses. Anda ingin pembaca layar untuk melihat konten anda, dan visual style ini dengan mengganti teks dengan gambar (seperti logo). Dengan menggunakan text-indent: -999px; atau metode yang sama, teks masih ada — tidak hanya secara visual ada. Gunakan display:none, dan teks yang hilang.

body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}

Di atas bekerja dengan baik di terbaru Thunderbird juga.

anda dapat menggunakan css latar belakang-gambar properti dan z-index untuk menjamin gambar tetap di depan teks.

Mengapa don't anda gunakan:

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

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

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

Jika anda belum't ada span atau elemen div, itu bekerja dengan sempurna untuk link.

Ini sebenarnya adalah sebuah area yang matang untuk diskusi, dengan banyak halus teknik yang tersedia. Adalah penting bahwa anda memilih/mengembangkan teknik yang memenuhi kebutuhan anda seperti: pembaca layar, gambar/css/script pada/off kombinasi, seo, dll.

Berikut ini adalah beberapa sumber yang baik untuk memulai menyusuri jalan standardista pengganti gambar teknik:

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

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

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

Jawabannya adalah untuk membuat rentang dengan properti

{display:none;}

Anda dapat menemukan contoh di situs ini

Jika intinya adalah hanya untuk membuat teks dalam elemen tak terlihat, mengatur warna atribut yang memiliki 0 opacity menggunakan rgba nilai seperti color:rgba(0,0,0,0); bersih dan sederhana.

Kondisi penggunaan tag untuk browser yang berbeda dan menggunakan css, anda harus menempatkan height:0px dan width:0px juga anda memiliki tempat untuk font-size:0px.

anda hanya dapat menyembunyikan teks dengan menambahkan atribut ini:

font size: 0 !important;

Coba kode ini untuk mempersingkat dan menyembunyikan teks

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

atau untuk menyembunyikan gunakan dalam css class .hidetxt { visibility: hidden; }

Saya don't ingat di mana saya mengambil ini, tetapi telah menggunakan itu berhasil untuk usia.

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

Saya mixin dalam sass namun anda bisa menggunakannya dengan cara apapun yang anda lihat cocok. Untuk mengukur baik saya biasanya menyimpan .tersembunyi kelas di suatu tempat di proyek saya untuk melampirkan ke elemen untuk menghindari duplikasi.