सीएसएस का उपयोग कर पाठ छिपाएँ

Question

मेरे पास इस तरह से मेरे html में एक टैग है:

<h1>My Website Title Here</h1>

सीएसएस का उपयोग करके मैं अपने वास्तविक लोगो के साथ पाठ को बदलना चाहता हूं। मुझे लोगो मिला है टैग के आकार बदलने और css के माध्यम से पृष्ठभूमि छवि डालने के माध्यम से कोई समस्या नहीं है। हालाँकि, मैं यह पता नहीं लगा सकता कि पाठ से कैसे छुटकारा पाया जाए। मैंने देखा है कि यह मूल रूप से पाठ को स्क्रीन से धकेलने से पहले किया गया था। समस्या यह है कि मुझे याद नहीं है कि मैंने इसे कहाँ देखा था।

Comments

यहाँ बहुत सारे पुराने उत्तर हैं: इसे उजागर करने के लिए अधिक हाल के उत्तर stackoverflow.com/a/27769435/2586761 पर विचार करें

— ptim

Answer 1

ये एक तरीका है:

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

यहां ब्राउज़र को बनाए जाने वाले विशाल 9999 पिक्सेल बॉक्स से बचने के लिए टेक्स्ट को छिपाने का एक और तरीका है:

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

Comments

लंबे शीर्षक इस विधि के साथ एक मुद्दा होगा क्योंकि केवल शब्द-रैप से पहले पाठ इंडेंट है, और W3C कल्पना नकारात्मक इंडेंट के लिए एक स्थिति निर्दिष्ट नहीं करता है, इसलिए यह अप्रत्याशित परिणाम हो सकता है

— क्रिस फार्मिलो

यदि आप इस विधि का उपयोग करते हैं, तो आपको "ओवरफ्लो: हिडन" को जोड़ना चाहिए, ताकि सेरेड सिलेक्शन बॉक्स को बाईं ओर शूट करने से रोका जा सके (विशेषकर लिंक के साथ)

— विलोलर

यदि आपके पास नकारात्मक पाठ-इंडेंट वाले तत्वों में कोई लिंक है, तो सुनिश्चित करें कि आप "रूपरेखा: कोई भी नहीं" निर्दिष्ट करते हैं अन्यथा आपको स्क्रीन के बाईं ओर एक बिंदीदार सीमा मिलती है।

— निकफ

मैं 'टेक्स्ट-इंडेंट: -9999px;' सिर्फ यह सुनिश्चित करने के लिए कि पाठ स्क्रीन से बहुत दूर चला जाए। थोड़ा रक्षात्मक व्यामोह।

— एंडी फोर्ड

इसके अलावा 'व्हाइट-स्पेस: नोराप' को केवल सुरक्षित पक्ष पर रखें यदि आपका टेक्स्ट केवल पहली पंक्ति के इंडेंट वाला लंबा है।

— एंड्रयू मूर

Answer 2

क्यों नहीं बस का उपयोग करें:

h1 { color: transparent; }

Comments

क्यों नहीं? क्योंकि Google को यह पसंद नहीं है।

— alekwisnia

सत्यापन (सीएसएस 2.1): 'पारदर्शी' 'रंग' संपत्ति के लिए एक वैध मूल्य नहीं है।

— हसनग

यदि उपयोगकर्ता इसे चुनता है तो पाठ दिखाई देगा (STRG + A आदि) - यह बहुत ही अव्यवसायिक लगता है! अभिवादन क्रिस्टोफर

— क्रिस्टोफर स्टॉक

@ HasanGürsoy और भविष्य के googler- "CSS3 'पारदर्शी' कीवर्ड को शामिल करने के लिए रंग मान बढ़ाता है ...."

— ABMagil

color: transparent;साथ काम करता है user-select: none;, जब तक कि आप रंग को ओवरराइड नहीं करते हैं।

— stan-z

Answer 3

बस font-size: 0;अपने तत्व में जोड़ें जिसमें पाठ हो।

.hidden { font-size: 0; }

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

Comments

मुझे ठीक इसी की आवश्यकता थी। मैं चाहता था कि एक तलाक में क्या छिपा था, लेकिन दिखाओ कि बच्चे के स्पैन में क्या था (उनके बीच विराम चिह्न को छिपाने के लिए)।

— mskfisher

यह सबसे तार्किक लगता है (पढ़ें: कम से कम विचित्र) विधि - हालांकि, मुझे आश्चर्य है कि यह विभिन्न ब्राउज़रों में कितनी अच्छी तरह से समर्थित है? (मैं पुष्टि कर सकता हूं कि यह फ़ायरफ़ॉक्स में काम करता है।)

— ब्रायन लैसी

यह अभी भी सिर्फ IE7 की तुलना में अधिक ब्राउज़रों में पाठ को बहुत छोटा दिखाता है, यह संपूर्ण क्रॉस ब्राउज़र समाधान नहीं है।

— macguru2000

मैंने Chrome 27, फ़ायरफ़ॉक्स 17, विंडोज़ 5.1.7, ओपेरा 12.12, ओपेरा 12.12, IE8, IE9, IE10 के लिए {फ़ॉन्ट-आकार: 0} चाल का परीक्षण किया है - यह उन सभी ब्राउज़रों में काम करता है। यह ट्रिक सबसे अच्छा है यदि आप बैकग्राउंड-इमेज को एलिमेंट पर सेट नहीं कर सकते हैं (उदाहरण के लिए क्योंकि आप कसकर पैक की गई स्प्राइट इमेज का उपयोग कर रहे हैं और आवश्यक आइकन के पास इसके चारों ओर पर्याप्त खाली गद्दी नहीं है), और छद्म चयनकर्ता का उपयोग करना होगा , उदाहरण तत्व: पृष्ठभूमि छवि प्रदर्शित करने के बाद।

— बेलुगा

यह div के आकार को भी बदलता है, इसलिए मैं इसकी सिफारिश नहीं करता।

— Stephan Bijzitter

Answer 4

HTML को लिखने के लिए सबसे क्रॉस-ब्राउज़र फ्रेंडली तरीका है

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

फिर स्पैन को छिपाने और छवि को बदलने के लिए सीएसएस का उपयोग करें

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

यदि आप CSS2 का उपयोग कर सकते हैं, तो contentसंपत्ति का उपयोग करने के कुछ बेहतर तरीके हैं, लेकिन दुर्भाग्य से अभी तक वेब 100% नहीं है।

Comments

लेकिन यह भी सुनिश्चित करें कि छवि की चौड़ाई और ऊंचाई की विशेषता भी निर्धारित करें - और सुनिश्चित करें कि "पैडिंग" और "मार्जिन" सेट हैं क्योंकि ब्राउज़र में अलग-अलग विचार हैं कि H1 टैग को कितना पैडिंग / मार्जिन करना है।

यहाँ दोष यह है कि यदि चित्र बंद किए गए हैं, या यदि कोई सीएसएस-जागरूक बॉट दिखाता है, तो शीर्षक दिखाई नहीं देगा।

— 4

प्रदर्शन के भीतर महत्वपूर्ण पाठ शायद कोई भी खोज इंजन बॉट और स्क्रीन पाठकों द्वारा याद नहीं किया जाएगा। इसके बजाय पाठ-इंडेंट का उपयोग करें।

— dylanfm

यह काम नहीं करेगा, ओपी शीर्षक में पाठ को हटा सकता है। स्क्रीन रीडर कुछ भी नहीं के साथ प्रदर्शन नहीं करते ..

— इदरीस डोपिको पेना

Answer 5

पाठ को ध्यान में रखते हुए पहुंच के साथ:

अन्य उत्तरों के अलावा, यहां पाठ को छिपाने के लिए एक और उपयोगी दृष्टिकोण है।

यह विधि पाठ को प्रभावी ढंग से छिपाती है, फिर भी यह स्क्रीन पाठकों के लिए दृश्यमान बनी रहती है। यह विचार करने का एक विकल्प है कि क्या पहुंच चिंता का विषय है।

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

यह इंगित करने योग्य है कि वर्तमान में बूटस्ट्रैप 3 में इस वर्ग का उपयोग किया जाता है ।

---

यदि आप पहुंच के बारे में पढ़ने में रुचि रखते हैं:

• वेब अभिगम्यता पहल (WAI)

• MDN पहुँच दस्तावेज़

Comments

Bs4 और h5bp के स्रोत: github.com/h5bp/html5-boilerplate/blob/master/src/css/… , github.com/twbs/bootstrap/blobb-v4-dev/scss/mixins/…

— ptim

एक तत्व को जोड़ने के लिए यह अच्छी तरह से काम करता है केवल स्क्रीन-रीडर है; हालाँकि, यह मूल प्रश्न के साथ काम नहीं करता है जहाँ एक छवि को css में निर्दिष्ट पृष्ठभूमि छवि द्वारा प्रदर्शित किया जाना है।

— vossad01

@ vossad01 - यदि आप एक और तत्व नहीं जोड़ सकते हैं, और आप एक ही तत्व (जैसे कि आपके द्वारा उल्लेख किया गया है) के साथ फंस गए हैं, तो एक अच्छा समाधान एक छद्म तत्व का उपयोग करना होगा ... इसके अलावा, मैंने इसे पोस्ट किया है प्रारंभिक प्रश्न पूछे जाने के 6 साल बाद, और मेरा उत्तर व्यापक दर्शकों को लक्षित करने का था क्योंकि यह प्रश्न लोकप्रिय प्रतीत होता है।

— जोश क्रोज़ियर

Answer 6

जेफरी ज़ेल्डमैन निम्नलिखित समाधान सुझाते हैं:

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

यह संसाधन से कम गहन होना चाहिए -9999px;

कृपया इसके बारे में सब यहाँ पढ़ें:

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

Answer 7

ताकत और कमजोरियों के साथ प्रत्येक तकनीक का एक अच्छा सारांश के लिए mezzoblue देखें , साथ ही उदाहरण के लिए HTML और सीएसएस।

Answer 8

इतने सारे जटिल समाधान।

सबसे आसान एक का उपयोग करने के लिए है:

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

Comments

महान! यह किसी भी पृष्ठभूमि के रंग के लिए काम करता है। धन्यवाद।

— संदीप अमरनाथ

Answer 9

आप इस विशेषता को जोड़कर अपना पाठ छिपा सकते हैं:

font size: 0 !important;

Comments

यह भी जांचने योग्य है कि क्या !importantआपके मामले में क्लॉज की वास्तव में जरूरत है। मेरे मामले में इसके बिना भी ठीक काम किया।

— एरिक स्वेन पूडिस्ट

Answer 10

उपयोग न करें { display:none; }यह सामग्री को दुर्गम बनाता है। आप स्क्रीन-पाठकों को अपनी सामग्री देखना चाहते हैं, और पाठ को एक छवि (जैसे लोगो) से बदलकर इसे नेत्रहीन रूप से देखते हैं। text-indent: -999px;एक समान विधि का उपयोग करके , पाठ अभी भी वहाँ है - बस नेत्रहीन वहाँ नहीं है। का उपयोग करें display:none, और पाठ चला गया है।

Answer 11

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

उपरोक्त नवीनतम थंडरबर्ड में भी अच्छी तरह से काम करता है।

Comments

ध्यान दें कि इस विधि का उपयोग करने से पाठ ज्यादातर स्क्रीन पाठकों के लिए पठनीय हो जाता है - देखें stackoverflow.com/questions/1755656/…

— जॉर्डन लेव

Answer 12

आप सीएसएस background-imageसंपत्ति का उपयोग कर सकते हैं और z-indexयह सुनिश्चित कर सकते हैं कि छवि पाठ के सामने बनी रहे।

Comments

उदाहरण? मैं नहीं देखता कि कैसे z-indexलागू होता है background-image।

— मार्टिनेस ज्यूसविसियस

Answer 13

आप उपयोग क्यों नहीं करते हैं:

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

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

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

यदि आपके पास कोई स्पैन या डिव तत्व नहीं है, तो यह लिंक के लिए पूरी तरह से काम करता है।

Answer 14

इसका जवाब संपत्ति के साथ एक स्पैन बनाना है

{display:none;}

आप इस साइट पर एक उदाहरण पा सकते हैं

Comments

डाउनवोट्स में से कुछ को शायद एक्सेसिबिलिटी चिंताओं के साथ - एक वैध बिंदु है। लेकिन मेरे मामले में, मैं एक रेस्तरां मेनू सेवा से एक मेनू को उनकी वेब सेवा के माध्यम से एक वेबसाइट में खींच रहा हूं। रेस्तरां के मालिक चाहते हैं कि कीमतें प्रदर्शित न हों (लेकिन वास्तविक मेनू को प्रिंट करने के लिए उसी सेवा का उपयोग किया जाता है।) यह एक ऐसी स्थिति है जहां कोई भी साइट पर कीमतें नहीं चाहता है। सभी संभावित दृष्टिकोणों को जानना अच्छा है।

— मार्वो

Answer 15

यह वास्तव में चर्चा का एक क्षेत्र है, जिसमें कई सूक्ष्म तकनीकें उपलब्ध हैं। यह महत्वपूर्ण है कि आप एक ऐसी तकनीक का चयन / विकास करें जो आपकी आवश्यकताओं को पूरा करती हो: जिसमें स्क्रीन रीडर, चित्र / सीएसएस / स्क्रिप्टिंग / ऑफ कॉम्बिनेशन, एसईओ आदि शामिल हैं।

मानक छवि प्रतिस्थापन तकनीकों की सड़क को शुरू करने के लिए यहां कुछ अच्छे संसाधन हैं:

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

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

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

Answer 16

भिन्न ब्राउज़र के लिए उपयोग की स्थिति टैग और का उपयोग कर सीएसएस आप जगह पर है height:0pxऔर width:0pxयह भी आप जगह पर है font-size:0px।

Answer 17

यदि बिंदु केवल तत्व के अंदर पाठ को अदृश्य बनाने के लिए है, तो रंग विशेषता निर्धारित करें 0 color:rgba(0,0,0,0);स्वच्छ और सरल जैसे आरजीबी मूल्य का उपयोग करके अपारदर्शिता ।

Answer 18

मुझे याद नहीं है कि मैंने इसे कहां से उठाया है, लेकिन इसे सफलतापूर्वक उम्र के लिए उपयोग कर रहा हूं।

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

मेरा मिश्रण सास में है लेकिन आप इसे किसी भी तरह से उपयोग कर सकते हैं जिसे आप फिट देखते हैं। अच्छे उपाय के लिए मैं आमतौर पर .hiddenनकल से बचने के लिए तत्वों को संलग्न करने के लिए अपनी परियोजना में कहीं एक वर्ग रखता हूं।

Comments

मुझे लगता है कि मैंने कहीं पढ़ा है कि यह संस्करण पसंद किया जाता है क्योंकि एक नकारात्मक टेक्स्ट-इंडेंट ब्राउज़र को 10000px (या जो भी उदाहरण आप उपयोग करते हैं) को लंबे बॉक्स के लिए प्रस्तुत करेगा। इस उदाहरण में फ़ॉन्ट बदलने से ब्राउज़र को एक बड़ा बॉक्स बनाने का कारण नहीं बनेगा जिसे वह प्रस्तुत करने का प्रयास करता है।

— गैंबो

Answer 19

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

}

Comments

एक लाइन-ऊंचाई क्यों है?

— सैंडरॉक

Answer 20

पाठ को छोटा और छिपाने के लिए इस कोड को आज़माएं

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

या अपने सीएसएस वर्ग में उपयोग छिपाने के लिए .hidetxt { visibility: hidden; }

Answer 21

CSS के साथ repalce कंटेंट

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

Answer 22

मैं आमतौर पर उपयोग करता हूं:

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

Answer 23

यदि हम मार्कअप को संपादित कर सकते हैं, तो जीवन आसान हो सकता है, बस पाठ को हटा दें और खुश रहें। लेकिन कभी-कभी मार्कअप को जेएस कोड द्वारा रखा जाता था या हमें इसे बिल्कुल भी संपादित करने की अनुमति नहीं थी, बहुत खराब सीएसएस हमारे निपटान में एकमात्र हथियार बन गया।

हम एक <span>रैपिंग टेक्स्ट नहीं रख सकते हैं और पूरे टैग को छिपा सकते हैं। वैसे, कुछ ब्राउज़र न केवल तत्वों को छिपाते हैंdisplay:none बल्कि अंदर के घटकों को भी निष्क्रिय कर देते हैं।

दोनों font-size:0pxऔरcolor:transparent अच्छा समाधान हो सकता है लेकिन कुछ ब्राउज़रों उन्हें समझ में नहीं आता। हम उन पर भरोसा नहीं कर सकते।

मैं सुझाव देता हूँ:

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

का उपयोग करते हुए overflow:hiddenलागू करता है हमारे चौड़ाई और ऊंचाई। कुछ ब्राउज़र (उन्हें नाम नहीं देंगे ... IE ) के रूप में चौड़ाई और ऊंचाई पढ़ सकते हैं min-widthऔर min-height। मैं बॉक्स को बड़ा होने से रोकना चाहता हूं।

Answer 24

तत्व के लिए शून्य मान का उपयोग करना font-sizeऔर line-heightमेरे लिए चाल करना है:

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

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

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

Answer 25

Html से पाठ को छिपाने के लिए css में टेक्स्ट-इंडेंट प्रॉपर्टी का उपयोग करें

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

/ * डायनामिक टेक्स्ट के लिए आपको व्हाइट-स्पेस जोड़ना होगा, ताकि आपका एप्लाइड सीएसएस डिस्टर्ब न हो। Nowrap का मतलब है कि टेक्स्ट अगली पंक्ति में कभी नहीं लपेटेगा, टेक्स्ट उसी लाइन पर जारी रहता है जब तक कोई <br>टैग सामने नहीं आता है

Answer 26

इसे प्राप्त करने के तरीकों में से एक का उपयोग करना है :beforeया :after। मैंने कई वर्षों से इस दृष्टिकोण का उपयोग किया है, और विशेष रूप से ग्लिफ़ वेक्टर आइकन के साथ बहुत अच्छा काम करता है।

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

Answer 27

इसने मेरे लिए स्पैन (नॉकआउट वेलिडेशन) के साथ काम किया।

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

Answer 28

एक समाधान जो मेरे लिए काम करता है:

एचटीएमएल

<div class="website_title"><span>My Website Title Here</span></div>

सीएसएस

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

Answer 29

सबसे अच्छा उत्तर लघु पाठ के लिए काम करता है, लेकिन यदि पाठ लपेटता है तो यह केवल छवि में दिखाई देता है।

इसे करने का एक तरीका एक जॉकरी हैंडलर के साथ त्रुटियों को पकड़ना है। एक छवि को लोड करने का प्रयास करें, अगर यह विफल हो जाता है तो यह एक त्रुटि फेंकता है।

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

नमूना देखें

Answer 30

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

Comments

इस कोड को इस सवाल का जवाब कर सकते हैं, के बारे में अतिरिक्त संदर्भ प्रदान करने क्यों और / या कैसे इस कोड को उत्तर देता सवाल अपनी दीर्घकालिक मूल्य में सुधार।

— बेंजामिन डब्ल्यू।