it-swarm.com.de

Text mit css ausblenden

Ich habe ein Tag in meiner HTML-Datei:

<h1>My Website Title Here</h1>

Mit css möchte ich den Text durch mein aktuelles Logo ersetzen. Ich habe das Logo dort kein Problem, indem ich die Größe des Tags geändert und ein Hintergrundbild über css eingefügt habe. Ich kann jedoch nicht herausfinden, wie ich den Text loswerden kann. Ich habe es schon vorher gesehen, indem ich den Text vom Bildschirm schob. Das Problem ist, ich kann mich nicht erinnern, wo ich es gesehen habe. 

282
Micah

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 ein anderer Weg , um den Text auszublenden, während die riesige 9999-Pixel-Box, die der Browser erstellt, vermieden wird:

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

Warum nicht einfach verwenden:

h1 { color: transparent; }
169
nesono

Fügen Sie einfach font-size: 0; 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>

147
valk

Die Browser-freundlichste Methode ist das Schreiben als HTML

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

verwenden Sie dann CSS, um den Bereich 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 content -Eigenschaft zu verwenden, aber leider ist das Web noch nicht zu 100% vorhanden.

32
Chris Farmiloe

Jeffrey Zeldman schlägt folgende Lösung vor:

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

Es sollte weniger Ressourcen erfordern als -9999px;

Lesen Sie hier alles darüber: 

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

19
chocolata

Text unter Berücksichtigung der Barrierefreiheit ausblenden:

Neben den anderen Antworten gibt es noch einen weiteren nützlichen Ansatz zum Ausblenden von Text.

Diese Methode verbirgt den Text effektiv und lässt ihn dennoch für Bildschirmleseprogramme sichtbar sein. Dies ist eine Option, die zu prüfen ist, ob die Barrierefreiheit ein Problem ist.

.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 Interesse haben, über Zugänglichkeit zu lesen:

16
Josh Crozier

Siehe mezzoblue für eine schöne Zusammenfassung jeder Technik mit Stärken und Schwächen sowie Beispiel für HTML und CSS.

15
darasd

So viele komplizierte Lösungen.

Die einfachste ist einfach zu benutzen:

color:rgba(0,0,0,0)
7
Pier

Verwenden Sie nicht { display:none; }. Dadurch ist der Inhalt nicht zugänglich. Sie möchten, dass Bildschirmleser Ihren Inhalt sehen und ihn visuell gestalten, indem Sie den Text durch ein Bild (wie ein Logo) ersetzen. Durch die Verwendung von text-indent: -999px; oder einer ähnlichen Methode ist der Text immer noch da - nur nicht visuell. Verwenden Sie display:none und der Text ist weg.

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

Das oben genannte funktioniert auch im neuesten Thunderbird.

5
kamalesh

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.

5
Hans

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

{display:none;}

Ein Beispiel finden Sie unter diese Seite

5
Andrei Krotkov

sie können die css-Eigenschaft background-image und z-index verwenden, um sicherzustellen, dass das Bild vor dem Text bleibt.

5
Jobo

Dies ist in der Tat ein Diskussionsraum mit vielen subtilen Techniken. Es ist wichtig, dass Sie eine Technik auswählen/entwickeln, die Ihren Anforderungen entspricht, z.

Hier finden Sie einige nützliche Ressourcen, um die Standard-Bildersetzungstechniken auf den Weg zu bringen:

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

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

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

4
willoller

Verwenden Sie das Bedingungs-Tag für verschiedene Browser. Bei Verwendung von css müssen Sie height:0px und width:0px und auch font-size:0px eingeben.

3
kedar

Verwenden Sie diesen Code, um den Text zu verkü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; }

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

}
2
vencedor

ersetzen Sie den Inhalt durch das CSS

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

Wenn der Punkt einfach darin besteht, den Text innerhalb des Elements unsichtbar zu machen, legen Sie das Farbattribut mit einem Rgba-Wert wie color:rgba(0,0,0,0); clean und simple auf eine Opazität von 0 fest.

2
Cafe Coder

Ich verwende normalerweise:

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

Ich kann mich nicht erinnern, wo ich das gefunden 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 nach Belieben verwenden. Aus gutem Grund verwende ich normalerweise eine .hidden-Klasse in meinem Projekt, um Elemente anzufügen, um Doppelarbeit zu vermeiden.

1
itsfreshmade

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

font size: 0 !important;
1
Omid Ahmadyani

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 Ihre angewendeten CSS nicht gestört werden. Nowrap bedeutet, dass Text nie in die nächste Zeile umgebrochen wird. Der Text wird in derselben Zeile fortgesetzt, bis ein <br>-Tag gefunden wird

1

Die Verwendung des Nullwerts für font-size und line-height im Element führt mich an:

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

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

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

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von :before oder :after. Ich habe diesen Ansatz seit mehreren Jahren angewandt und funktioniert 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;
    }
1
Pegues

Wenn wir das Markup bearbeiten können, kann das Leben einfacher sein, einfach Text entfernen und zufrieden sein. Aber manchmal wurde das Markup mit JS-Code erstellt oder wir dürfen es überhaupt nicht bearbeiten, zu schlecht, weil Css sich als einzige Waffe zur Verfügung stellte.

Wir können keinen <span> platzieren, der den Text umschließt, und das gesamte Tag ausblenden. Einige Browser blenden Elemente nicht nur mit display:none aus, sondern deaktivieren auch die darin enthaltenen Komponenten.

Sowohl font-size:0px als auch color:transparent können gute Lösungen sein, 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 von overflow:hidden erzwingt unsere Breite und Höhe. Einige Browser (benennen sie nicht ..., DH) können Breite und Höhe als min-width und min-height lesen. Ich möchte verhindern, dass die Box vergrößert wird.

1
Francisco

Das funktionierte für mich mit Span (KO-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;
}
0
Karson

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