Tekst verbergen met css

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

Antwoord 22

Ik gebruik meestal:

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

Antwoord 23

Als we de markup kunnen bewerken, kan het leven eenvoudiger zijn, gewoon tekst verwijderen en gelukkig zijn. Maar soms werd de markup geplaatst door JS-code of we mogen het gewoon niet bewerken, al te slechte CSS draaide zich het enige wapen dat bij onze beschikking is gedraaid.

We kunnen geen <span>inpakken van de tekst en verberg de hele tag. Trouwens, sommige browsers verbergt niet alleen elementen met display:none, maar schakelt ook de componenten binnen.

Beide font-size:0pxen color:transparentMogen goede oplossingen zijn, maar sommige browsers begrijpen ze niet. We kunnen er niet op vertrouwen.

Ik stel voor:

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

Gebruik overflow:hiddenEnkorces onze width & amp; hoogte. Sommige browsers (zullen ze niet noemen … ie ) kunnen de breedte en hoogte lezen als min-widthen min-height. Ik wil voorkomen dat het vak wordt vergroot.

Antwoord 24

Gebruik van nulwaarde voor font-sizeEN line-heightin het element doet de truc voor mij:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;
        font-size: 0;
        line-height: 0;
    }
</style>
<span class="text">
    Invisible Text
</span>

Antwoord 25

Om tekst uit HTML te verbergen, gebruik dan de eigenschap Text-Indent in CSS

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

/ * Voor dynamische tekst moet u White-Space toevoegen, zodat uw toegepaste CSS niet stoort. Nowrap betekent dat tekst nooit naar de volgende regel wikkelt, de tekst blijft op dezelfde lijn tot een <br>tag is aangetroffen

Antwoord 26

Een van de manieren waarop ik dit bereik, is het gebruik van :beforeof :after. Ik heb deze aanpak enkele jaren gebruikt, en werkt in het bijzonder geweldig met glyph vector iconen.

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

Antwoord 27

Dit werkte voor mij met span (knock-outvalidatie).

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

Antwoord 28

een oplossing die voor mij werkt:

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

Antwoord 29

Inhoudsvervanging is rechtstreeks verkrijgbaar in CSS met behulp van de contentProperty.

Dit lijkt het meest te worden gebruikt om ::beforeen ::afterpseudo-elementen, maar kan ook worden gebruikt om de inhoud van bestaande HTML-elementen te vervangen .

Voor het originele voorbeeld

<h1>My Website Title Here</h1>

Dit is de CSS die de tekst met het logo vervangen:

       h1 {
            content: url(mywebsitelogo.png);
            width: 100%;
        }

In pseudo-elementen kan elk beeldgehalte niet worden verkleind (behalve door het te gebruiken als een achtergrondafbeelding), dit is niet de behuizing voor het vervangen van inhoud.

Standaard wordt de afbeelding op ware grootte weergegeven, waarbij de container indien nodig wordt vergroot, precies alsof deze een echt <img>-element bevat.

In dit voorbeeld wordt width: 100%gebruikt om de logoafbeelding over de volledige breedte te laten passen. Als de afbeelding indien nodig moet worden verkleind om te passen, maar nooit moet worden vergroot als de container groter is dan de afbeelding, kan in plaats daarvan max-width: 100%worden gebruikt.

Volgens MDNde enige reguliere browser die geenvervanging van CSS-inhoud ondersteunt, is Internet Explorer.

Antwoord 30

Het beste antwoord werkt voor korte tekst, maar als de tekst terugloopt, wordt deze gewoon in de afbeelding weergegeven.

Een manier om dit te doen is door fouten op te vangen met een jQuery-handler. Probeer een afbeelding te laden, als het niet lukt, wordt er een fout gegenereerd.

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

Zie VOORBEELDCODE