Ascunde textul folosind css

Aceasta este o modalitate de:

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

Aici este un alt mod pentru a ascunde textul evitând în același timp mare de 9999 de pixel cutie care browser-ul va crea:

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

De ce nu pur și simplu utilizați:

h1 { color: transparent; }

Trebuie doar să adăugați font-size: 0; să-ți element care conține text.

.ascunse { font-size: 0; }

font-size: 0; ascunde textul. puteți't mă vezi :)

Cel mai mult cross-browser-ul prietenos mod este de a scrie HTML ca

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

apoi, utilizați CSS pentru a ascunde durata și înlocui imaginea

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

Dacă puteți folosi CSS2, atunci există unele modalități mai bune folosind conținut proprietate, dar, din păcate web e't 100% acolo.

Ascunde text cu accesibilitate în minte:

În plus față de alte răspunsuri, aici este o altă abordare utilă pentru a ascunde textul.

Această metodă ascunde în mod eficient textul, dar îi permite să rămână vizibile pentru cititoarele de ecran. Aceasta este o opțiune să ia în considerare dacă accesibilitatea este un motiv de îngrijorare.

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

L's valoare de subliniind faptul că această clasă este utilizată în prezent în Bootstrap 3.

Daca're interesat în a citi despre accesibilitate:

• Web Accessibility Initiative (WAI)

• MDN Accesibilitatea documentației

Jeffrey Zeldman sugerează următoarea soluție:

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

Ar trebui să fie mai puțin consumatoare de resurse decat -9999px;

Vă rugăm să citiți totul despre asta aici:

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

A se vedea mezzoblue pentru un rezumat al fiecărei tehnica, cu punctele forte și punctele slabe, plus exemplu html și css.

Atât de multe solutii complicate.

Cel mai simplu este pur și simplu de a utiliza:

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

A nu se folosi { display:none; } Se face conținutul inaccesibile. Vrei cititoare de ecran pentru a vedea conținutul dvs., și vizual stil prin înlocuirea textului cu o imagine (cum ar fi un logo). Prin utilizarea text-indent: -999px; sau o metodă similară, textul este încă acolo — nu doar vizual acolo. Folosesc display:none`, iar textul este plecat.

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

Cele de mai sus funcționează bine în cele mai recente Thunderbird, de asemenea,.

puteți utiliza css `background-image "proprietate și" z-index pentru a asigura imaginea rămâne în fața textului.

De ce nu't utilizați:

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

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

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

Dacă te-ai't orice interval sau element div, functioneaza perfect pentru link-uri.

Aceasta este de fapt o zonă coapte pentru discuții, cu multe subtile tehnici disponibile. Este important să selectați/dezvolta o tehnică care îndeplinește nevoile dvs., inclusiv: cititoare de ecran, imagini/css/scripting on/off combinații, seo, etc.

Aici sunt unele resurse bune pentru a obține a început drumul de standardista imagine tehnici de înlocuire:

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

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

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

Răspunsul este de a crea un interval cu proprietatea

{display:none;}

Puteți găsi un exemplu la acest site

Dacă punctul este pur și simplu pentru a face textul în interiorul elementului invizibil, setați culoarea atributul de a avea 0 opacitate folosind un rgba valoare, cum ar fi color:rgba(0,0,0,0); curat și simplu.

Utilizarea tag Stare pentru diferite browser-ul și folosind css va trebui să loc înălțime:0px " și " lățime:0px, de asemenea, va trebui să loc font-size:0px.

puteți pur și simplu ascunde text de a adăuga acest atribut:

font size: 0 !important;

Încercați acest cod pentru a scurta și ascunde textul

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

sau pentru a ascunde utilizarea în clasă css .hidetxt { visibility: hidden; }

Eu nu't amintesc de unde am luat asta, dar au fost folosind-o cu succes pentru vârstele.

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

Mi mixin este în sass cu toate acestea, puteți folosi orice fel tu de cuviință. Pentru o bună măsură, în general, am păstrați-o.ascunse` clasa undeva în proiectul meu de a atașa elemente pentru a evita duplicarea.