Text mit CSS ausblenden

Ich habe ein Tag in meinem HTML wie folgt:

<h1>My Website Title Here</h1>

Mit CSS möchte ich den Text durch mein eigentliches Logo ersetzen. Ich habe das Logo dort kein Problem durch Ändern der Größe des Tags und Einfügen eines Hintergrundbildes über CSS. Ich kann jedoch nicht herausfinden, wie ich den Text loswerden kann. Ich habe es schon einmal gesehen, indem ich den Text vom Bildschirm gestoßen habe. Das Problem ist, ich kann mich nicht erinnern, wo ich es gesehen habe.

Dies ist eine Möglichkeit:

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

Hier ist eine andere Möglichkeit , den Text auszublenden und gleichzeitig die riesige 9999-Pixel-Box zu vermeiden, die der Browser erstellt:

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

Warum nicht einfach verwenden:

h1 { color: transparent; }

Fügen font-size: 0;Sie einfach zu Ihrem Element hinzu, das Text enthält.

.hidden { font-size: 0; }

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

Die browserübergreifendste Methode ist das Schreiben von HTML als

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

Verwenden Sie dann CSS, um die Spanne auszublenden und das Bild zu ersetzen

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

Wenn Sie CSS2 verwenden können, gibt es einige bessere Möglichkeiten, die contentEigenschaft zu verwenden, aber leider ist das Web noch nicht zu 100% vorhanden.

Ausblenden von Text unter Berücksichtigung der Barrierefreiheit:

Neben den anderen Antworten finden Sie hier einen weiteren nützlichen Ansatz zum Ausblenden von Text.

Diese Methode verbirgt den Text effektiv, lässt ihn jedoch für Bildschirmleser sichtbar. Dies ist eine Option, die Sie in Betracht ziehen sollten, wenn die Barrierefreiheit ein Problem darstellt.

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

Es sei darauf hingewiesen, dass diese Klasse derzeit in Bootstrap 3 verwendet wird .

Wenn Sie über Barrierefreiheit lesen möchten:

• Web Accessibility Initiative (WAI)

• Dokumentation zur MDN-Barrierefreiheit

Jeffrey Zeldman schlägt die folgende Lösung vor:

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

Es sollte weniger ressourcenintensiv sein als -9999px;

Bitte lesen Sie hier alles darüber:

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

In Mezzoblue finden Sie eine schöne Zusammenfassung der einzelnen Techniken mit Stärken und Schwächen sowie Beispiel für HTML und CSS.

So viele komplizierte Lösungen.

Am einfachsten ist es einfach zu benutzen:

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

Sie können Ihren Text einfach ausblenden, indem Sie dieses Attribut hinzufügen:

font size: 0 !important;

Nicht verwenden { display:none; }Es macht den Inhalt unzugänglich. Sie möchten, dass Screenreader Ihre Inhalte sehen und visuell gestalten, indem Sie den Text durch ein Bild (wie ein Logo) ersetzen. Mit text-indent: -999px;einer ähnlichen Methode ist der Text immer noch vorhanden - nur nicht visuell. Verwenden Sie display:none, und der Text ist weg.

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

Das obige funktioniert auch im neuesten Thunderbird gut.

Sie können die CSS- background-imageEigenschaft verwenden und z-indexsicherstellen, dass das Bild vor dem Text bleibt.

Warum benutzt du nicht:

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

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

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

Wenn Sie kein span- oder div-Element haben, funktioniert es perfekt für Links.

Die Antwort besteht darin, eine Spanne mit der Eigenschaft zu erstellen

{display:none;}

Ein Beispiel finden Sie auf dieser Seite

Dies ist tatsächlich ein Bereich, der zur Diskussion reif ist und in dem viele subtile Techniken zur Verfügung stehen. Es ist wichtig, dass Sie eine Technik auswählen / entwickeln, die Ihren Anforderungen entspricht, einschließlich: Bildschirmleseprogramme, Bilder / CSS / Scripting-Ein / Aus-Kombinationen, SEO usw.

Im Folgenden finden Sie einige gute Ressourcen für den Einstieg in die Standardista-Bildersetzungstechniken:

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

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

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

Verwenden Sie das Bedingungs-Tag für einen anderen Browser und verwenden Sie CSS, das Sie platzieren müssen, height:0pxund width:0pxSie müssen auch platzieren font-size:0px.

Wenn es nur darum geht, den Text innerhalb des Elements unsichtbar zu machen, setzen Sie das Farbattribut mit einem rgba-Wert wie color:rgba(0,0,0,0);sauber und einfach auf 0 Deckkraft .

Ich erinnere mich nicht, wo ich das aufgenommen habe, aber ich benutze es seit Ewigkeiten erfolgreich.

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

Mein Mixin ist in Sass, aber Sie können es verwenden, wie Sie es für richtig halten. Im Allgemeinen behalte ich eine .hiddenKlasse irgendwo in meinem Projekt, um sie an Elemente anzuhängen, um Doppelarbeit zu vermeiden.

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

}

Versuchen Sie diesen Code, um Text zu kürzen und auszublenden

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

oder um die Verwendung in Ihrer CSS-Klasse zu verbergen .hidetxt { visibility: hidden; }

Repalce-Inhalte mit dem CSS

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

Ich benutze normalerweise:

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

Wenn wir das Markup bearbeiten können, kann das Leben einfacher sein. Entfernen Sie einfach Text und seien Sie glücklich. Aber manchmal wurde das Markup durch JS-Code platziert oder wir dürfen es überhaupt nicht bearbeiten. Schade, dass CSS die einzige Waffe war, die uns zur Verfügung stand.

Wir können <span>den Text nicht umbrechen und das gesamte Tag ausblenden. Übrigens verstecken einige Browser nicht nur Elemente mit, display:nonesondern deaktivieren auch die darin enthaltenen Komponenten.

Beides font-size:0pxund color:transparentvielleicht gute Lösungen, aber einige Browser verstehen sie nicht. Wir können uns nicht auf sie verlassen.

Ich schlage vor:

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

Die Verwendung overflow:hiddenerzwingt unsere Breite und Höhe. Einige Browser (nennen sie nicht ... IE ) lesen möglicherweise Breite und Höhe als min-widthund min-height. Ich möchte verhindern, dass die Box vergrößert wird.

Die Verwendung des Nullwerts für font-sizeund line-heightim Element macht den Trick für mich:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

Um Text vor HTML auszublenden, verwenden Sie die Eigenschaft text-indent in css

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

/ * Für dynamischen Text müssen Sie Leerzeichen hinzufügen, damit Ihr angewendetes CSS nicht stört. nowrap bedeutet, dass Text niemals in die nächste Zeile umgebrochen wird. Der Text wird in derselben Zeile fortgesetzt, bis ein <br>Tag gefunden wird

Ich erreiche dies unter anderem mit :beforeoder :after. Ich habe diesen Ansatz mehrere Jahre lang verwendet und arbeite besonders gut mit Glyphenvektorsymbolen.

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

Dies funktionierte bei mir mit span (Knockout-Validierung).

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

Eine Lösung, die für mich funktioniert:

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

Die beste Antwort funktioniert für kurzen Text, aber wenn der Text umbrochen wird, wird er nur im Bild angezeigt.

Eine Möglichkeit besteht darin, Fehler mit einem JQuery-Handler abzufangen. Versuchen Sie, ein Bild zu laden. Wenn dies fehlschlägt, wird ein Fehler ausgegeben.

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

Siehe BEISPIELCODE

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