दिलचस्प पोस्ट
वापसी का प्रकार '?:' (टर्नरी सशर्त ऑपरेटर) एक onclick फ़ंक्शन में स्ट्रिंग पैरामीटर पास करें जावा: स्टेटिक क्लास? वाम-रैखिक और राइट-रैखिक ग्रामर्स कोणीय निर्देशों में एक नियंत्रक की आवश्यकता कैसे होती है जब वैक्टर आवंटित किए जाते हैं, क्या वे ढेर या ढेर पर स्मृति का उपयोग करते हैं? प्रत्येक कॉलम सेल के लिए स्तंभ कक्षों का विस्तार करना std :: queue iteration प्रारूप फ़्लोट से n दशमलव स्थानों पर Jarsigner प्रोग्राम के साथ हस्ताक्षर किए जार की पुष्टि कैसे करें मीटिंग को प्रकाशित करना / सदस्यता लें जावास्क्रिप्ट: क्या इंटीरियर एचटीएमएल या (बहुत से) का उपयोग करने के लिए बेहतर जटिल संरचना को जोड़ने के लिए एलेमेंट कॉल्स करना बेहतर है? निर्धारित अनुभाग हेडर के साथ UITableView सी ++ में स्ट्रिंग के लिए आप इंट को कैसे जोड़ सकते हैं? JQuery के साथ नई विंडो में सामग्री लिखें

मैं सीएसएस के साथ पाठ कैसे बदल सकता हूँ?

सीएसएस के साथ पाठ को मैं इस तरह एक विधि का उपयोग कैसे कर सकता हूं:

.pvw-title img[src*="IKON.img"] { visibility:hidden; } 

इसके बजाय ( img[src*="IKON.img"] ), मुझे उस चीज़ का उपयोग करना होगा जो इसके बजाय पाठ को बदल सकते हैं

मुझे इसे काम करने के लिए [ ] का उपयोग करना होगा

<div class="pvw-title">Facts</div>

मुझे "तथ्यों" को बदलने की आवश्यकता है

वेब के समाधान से एकत्रित समाधान "मैं सीएसएस के साथ पाठ कैसे बदल सकता हूँ?"

या हो सकता है कि आप 'फ़ैक्ट्स' को गोल करने के बाद <span> को लपेटें:

 <div class="pvw-title"><span>Facts</span></div> 

फिर उपयोग करें:

 .pvw-title span { display: none; } .pvw-title:after { content: 'whatever it is you want to add'; } 

अनिवार्य : यह एक हैक है: सीएसएस ऐसा करने के लिए सही जगह नहीं है, लेकिन अगर कुछ स्थिति में – उदाहरण के लिए, आपके पास एक आईफ्रेम में एक तीसरी पार्टी लाइब्रेरी है जिसे केवल सीएसएस द्वारा कस्टमाइज़ किया जा सकता है – इस प्रकार का हैक ही है विकल्प।

आप सीएसएस के माध्यम से पाठ को बदल सकते हैं। सीएसएस का उपयोग करते हुए, अलविदा कहने वाले लाल बटन के साथ 'हैलो' के साथ एक हरे बटन को बदल दें । लाइव डेमो के लिए http://jsfiddle.net/ZBj2m/274/ देखें:

यहां हमारा हरा बटन है:

 <button>Hello</button> button { background-color: green; color: black; padding: 5px; } 

अब हम मूल तत्व को छिपाते हैं, लेकिन बाद में एक अन्य ब्लॉक तत्व जोड़ें:

 button { visibility: hidden; } button:after { content:'goodbye'; visibility: visible; display: block; position: absolute; background-color: red; padding: 5px; top: 2px; } 

ध्यान दें:

  • हमें स्पष्ट रूप से इसे एक ब्लॉक तत्व के रूप में चिह्नित करने की आवश्यकता है, 'बाद' तत्व डिफ़ॉल्ट रूप से विस्तारित होते हैं
  • छद्म तत्व की स्थिति का समायोजन करके हमें मूल तत्व की भरपाई करने की जरूरत है।
  • हमें मूल तत्व को छिपाया जाना चाहिए और दृश्यता का उपयोग करके छद्म तत्व प्रदर्शित करना चाहिए। नोट डिस्प्ले: मूल तत्व पर कोई भी काम नहीं करता है

यदि आप छद्म तत्वों का उपयोग करने के लिए तैयार हैं और उन्हें सामग्री सम्मिलित करने के लिए तैयार हैं, तो आप निम्न कर सकते हैं। यह मूल तत्व का ज्ञान नहीं मानता है और अतिरिक्त मार्कअप की आवश्यकता नहीं है

 .element { text-indent: -9999px; line-height: 0; /* Collapse the original line */ } .element::after { content: "New text"; text-indent: 0; display: block; line-height: initial; /* New content takes up original line height */ } 

JSFiddle उदाहरण

मिकमेक्कान के उत्तर के आधार पर, यह मेरे लिए काम किया

 button { position: absolute; visibility: hidden; } button:before { content: "goodbye"; visibility: visible; } 

§ संपूर्ण स्थिति

एक तत्व जो पूरी तरह से स्थानांतरित होता है, उसे प्रवाह से बाहर ले जाता है और इस प्रकार अन्य तत्वों को रखने पर कोई स्थान नहीं लेता है।

सरल, लघु, प्रभावी आवश्यक कोई अतिरिक्त HTML नहीं

 .pvw-title { color: transparent; } .pvw-title:after { content: "New Text To Replace Old"; color: black; /* set color to original text color */ margin-left: -30px; /* margin-left equals length of text we're replacing */ } 

Woocommerce breadcrumbs के लिए, घर के अलावा, कड़ी पाठ को बदलने के लिए मुझे ऐसा करना था

एस.ए.एस.एस. / कम

 body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] { color: transparent; &:after { content: "Store"; color: grey; margin-left: -30px; } } 

सीएसएस

 body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] { color: transparent; } body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after { content: "Store"; color: @child-color-grey; margin-left: -30px; } 

उपयोग करने का प्रयास करें: पहले और: बाद एचटीएमएल के बाद एक पाठ सम्मिलित करता है, html के पहले अन्य सम्मिलित करता है। यदि आप पाठ को बदलना चाहते हैं, तो बटन की सामग्री खाली छोड़ें

यह उदाहरण स्क्रीन की चौड़ाई के आकार के अनुसार बटन पाठ सेट करता है

 <meta name="viewport" content="width=device-width, initial-scale=1"> <style> button:before { content: 'small screen'; } @media screen and (min-width: 480px) { button:before { content: 'big screen'; } } </style> <body> <button type="button">xxx</button> <button type="button"></button> </body> 

टेक्स्ट बटन:

1) के साथ: पहले

बड़ी स्क्रीन xxxx

बड़ा पर्दा

2) के साथ: के बाद

xxxbig स्क्रीन

बड़ा पर्दा

आप नहीं कर सकते, ठीक है, आप कर सकते हैं

 .pvw-title:after { content: "Test"; } 

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

लेकिन जब आप अधिक या कम कर सकते हैं, तो आपको नहीं करना चाहिए। दस्तावेज़ में वास्तविक सामग्री डालना चाहिए सामग्री की संपत्ति मुख्य रूप से छोटे मार्कअप के लिए होती है, जैसे पाठ के आस-पास के उद्धरण चिह्नों को उद्धृत करना चाहिए।

यह इनलाइन पाठ के साथ मेरे लिए काम किया एफएफ, सफारी, क्रोम और ओपेरा में परीक्षण

 <p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p> span { visibility: hidden; word-spacing:-999px; letter-spacing: -999px; } span:after { content: "goodbye"; visibility: visible; word-spacing:normal; letter-spacing:normal; } 

मैं इस चाल का उपयोग करता हूं:

 .pvw-title { text-indent: -999px; } .pvw-title:after { text-indent: 0px; float: left; content: 'My New Content'; } 

मैंने इसका इस्तेमाल केवल बेस क्लास को बदलकर पृष्ठों के अंतर्राष्ट्रीयकरण को संभालने के लिए किया है …

 .translate-es .welcome { text-indent: -999px; } .translate-es .welcome:after { text-indent: 0px; float: left; content: '¡Bienvenidos!'; } 

यह पूरी तरह से इस सवाल का जवाब नहीं दे सकता है, लेकिन यह मेरी ज़रूरतों और शायद दूसरों को भी संतुष्ट करता है

इसलिए यदि आप अलग-अलग ग्रंथों या छवियों को दिखाना चाहते हैं, तो टैग को खाली रखें और अपनी सामग्री को कई डेटा विशेषताओं जैसे कि <span data-text1="Hello" data-text2="Bye"></span> । उन्हें एक छद्म वर्ग के साथ प्रदर्शित करें :before {content: attr(data-text1)}

अब आपके पास उन दोनों के बीच स्विच करने के विभिन्न तरीके हैं। मैंने उन्हें माउस नेविगेशन के नामों को आइकनों पर बदलने के लिए एक उत्तरदायी डिजाइन दृष्टिकोण के लिए मीडिया प्रश्नों के संयोजन में प्रयोग किया था।

jsfiddle प्रदर्शन और उदाहरण

मेरे पास font-size: 0 की बेहतर किस्मत थी font-size: 0 बाह्य तत्व का font-size: 0 , और font-size :after चयनकर्ता के :after जो कुछ भी मुझे चाहिए था

यह एक चेकबॉक्स को एक बटन के रूप में लागू करता है जो कि 'चेक' स्थिति के आधार पर हां या नहीं दिखाता है। तो यह किसी भी कोड लिखने के बिना सीएसएस का उपयोग कर पाठ की जगह का एक तरीका दर्शाता है

यह अभी भी एक चेकबॉक्स की तरह व्यवहार करता है जहां तक ​​एक पोस्ट मूल्य लौट रहा है (या वापस नहीं), लेकिन एक प्रदर्शन बिंदु से यह टॉगल बटन जैसा दिखता है

रंग आपकी पसंद के लिए नहीं हो सकते हैं, वे केवल एक बिंदु को वर्णन करने के लिए हैं।

एचटीएमएल है:

 <input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label> 

… और सीएसएस है:

 /* --------------------------------- */ /* Make the checkbox non-displayable */ /* --------------------------------- */ input[type="checkbox"].yesno { display:none; } /* --------------------------------- */ /* Set the associated label <span> */ /* the way you want it to look. */ /* --------------------------------- */ input[type="checkbox"].yesno+label span { display:inline-block; width:80px; height:30px; text-align:center; vertical-align:middle; color:#800000; background-color:white; border-style:solid; border-width:1px; border-color:black; cursor:pointer; } /* --------------------------------- */ /* By default the content after the */ /* the label <span> is "No" */ /* --------------------------------- */ input[type="checkbox"].yesno+label span:after { content:"No"; } /* --------------------------------- */ /* When the box is checked the */ /* content after the label <span> */ /* is "Yes" (which replaces any */ /* existing content). */ /* When the box becomes unchecked the*/ /* content reverts to the way it was.*/ /* --------------------------------- */ input[type="checkbox"].yesno:checked+label span:after { content:"Yes"; } /* --------------------------------- */ /* When the box is checked the */ /* label <span> looks like this */ /* (which replaces any existing) */ /* When the box becomes unchecked the*/ /* layout reverts to the way it was. */ /* --------------------------------- */ input[type="checkbox"].yesno:checked+label span { color:green; background-color:#C8C8C8; } 

मैंने केवल फ़ायरफ़ॉक्स पर कोशिश की है, लेकिन यह मानक सीएसएस है, इसलिए इसे कहीं और काम करना चाहिए।

यह चाल के बिना वास्तव में संभव नहीं है यहां एक तरीका है जो पाठ की छवि के साथ पाठ को बदलकर काम करता है।

 .pvw-title{ text-indent:-9999px; background-image:url(text_image.png) } 

इस प्रकार की चीज़ आम तौर पर जावास्क्रिप्ट के साथ होती है यहां बताया गया है कि यह कैसे jQuery के साथ किया जा सकता है:

 $('.pvw-title').text('new text'); 

छद्म तत्व का उपयोग करना, इस विधि को मूल तत्व के ज्ञान की आवश्यकता नहीं है और किसी भी अतिरिक्त मार्कअप की आवश्यकता नहीं है

 #someElement{ color: transparent; /*you may need to change this color*/ position: relative; } #someElement:after { /*or use :before if that tickles your fancy*/ content:"New text"; color:initial; position:absolute; top:0; left:0; } 

मेरे पास एक ऐसा मुद्दा था जहां मुझे लिंक के पाठ को बदलना पड़ा, लेकिन जावास्क्रिप्ट का उपयोग नहीं कर सका और न ही मैं सीधे हाइपरलिंक के पाठ को बदल सकता था क्योंकि इसे XML से संकलित किया गया था इसके अलावा, मैं छद्म तत्वों का उपयोग नहीं कर सका, या जब मैंने उनसे कोशिश की तो वे काम नहीं कर पाए।

असल में, मैं पाठ को एक स्पान में रखना चाहता था और इसके नीचे लंगर टैग डाल दिया और एक div में दोनों लिपटे। मैं मूल रूप से सीएसएस के माध्यम से एंकर टैग को स्थानांतरित कर दिया और फिर फ़ॉन्ट पारदर्शी बना दिया। अब जब आप अवधि के ऊपर होवर करते हैं, तो यह एक कड़ी की तरह "कार्य" होता है ऐसा करने का एक सचमुच hacky तरीका है, लेकिन यह है कि आप अलग पाठ के साथ एक लिंक कैसे कर सकते हैं …

यह इस बात का एक बेला है कि मैं इस मुद्दे को कैसे मिला

मेरा एचटीएमएल

 <div class="field"> <span>This is your link text</span><br/> <a href="//www.google.com" target="_blank">This is your actual link</a> </div> 

मेरा सीएसएस

  div.field a { color:transparent; position:absolute; top:1%; } div.field span { display:inline-block; } 

सीएसएस को आपकी आवश्यकताओं के आधार पर बदलना होगा, लेकिन यह आप जो पूछ रहे हैं, यह करने का एक सामान्य तरीका है।

संपादित करें: क्या कोई मुझे बता सकता है कि यह गिरावट क्यों है? मेरा समाधान काम करता है …

हर एक दूसरे जवाब में मैं जो देखता हूं, उसके विपरीत, आपको छद्म तत्वों का उपयोग करने की आवश्यकता नहीं है ताकि एक छवि के साथ बैलेज़ की सामग्री को बदल सकें

तथ्य

 div.pvw-title { /* no :after or :before required*/ content: url("your url here"); }