सीएसएस सामग्री का उपयोग करके HTML संस्थाओं को जोड़ना

Question

HTML संस्थाओं को जोड़ने के लिए आप CSS content संपत्ति का उपयोग कैसे करते हैं ?

इस तरह के कुछ का उपयोग करना  गैर-ब्रेकिंग स्पेस के बजाय स्क्रीन पर प्रिंट करता है:

.breadcrumbs a:before {
    content: ' ';
}

Comments

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

— 8

निर्भर करता है। इस मामले में यह प्रस्तुति उद्देश्यों के लिए है। यह HTML में ">" डालने के लिए ">" उल्लंघन करेगा

— मैथ्यू

बस एक सवाल है, क्या आपको लगता है कि ऑर्डर की गई सूची के रूप में बेहतर होगा? मेरा मतलब है, यह एक सूची है एक आदेश के साथ यह नहीं है?

— एलेक्स

@questzen - मुझे लगता है कि सीएसएस :afterका उपयोग करने के लिए यह पूरी तरह से स्वीकार्य (और अच्छा रूप) है , उदाहरण के लिए, सॉर्ट किए गए कॉलम पर asc / desc सॉर्ट इंडिकेटर।

— जोश एम।

मैंने देखा कि लोग SoC सिद्धांत के बारे में पागल हो गए हैं। भारी, किस तरह की सामग्री आपके लिए एक ">" संकेत है ?! दया कीजिए! यह इस संदर्भ में एक आइकन है, एक विजेट, एक बुलेट, आप इसे नाम देते हैं। मेरे लिए सामग्री कुछ ऐसी है जिसे मैं खोजा जाना चाहूंगा।

— user776686

Answer 1

आपको बच गए यूनिकोड का उपयोग करना होगा:

पसंद

.breadcrumbs a:before {
    content: '\0000a0';
}

अधिक जानकारी: http://www.evotech.net/blog/2007/04/ name-html-entities-in-numeric-order/

Comments

अग्रणी शून्य बहुत ही शानदार हैं, सीएसएस 2.1: 4.3.7 स्ट्रिंग्स देखें । '>\a0'पर्याप्त होता।

— प्वाइंटएडर्स

इसके अलावा @dlamblin, वर्ण एस्केप अनुक्रम के भाग के रूप में व्याख्या की जा रही से बचने के लिए मज़बूती से , मानक सफेद-अंतरिक्ष जोड़ें: '>\a0 bc'प्रदर्शित किया जाता है > bc।

— पॉइंटएर्स

मेरा टूल amp-what.com/#q=%3E एक "सीएसएस" मोड प्रदान करता है। पृष्ठ के निचले भाग में "सीएसएस" चुनें। ऊपर सीएसएस संदर्भ के अनुसार, जब वे अस्पष्ट होते हैं, तो उन्हें अंतरिक्ष सीमांकित करने की आवश्यकता होती है।

— ndp

@mathieu क्या आप छवि को जोड़ने के लिए 'सामग्री' का उपयोग कर सकते हैं? बस सोच रहा था

— weia डिजाइन

@ एडम, नहीं, यदि आप एक छवि जोड़ना चाहते हैं, तो "पृष्ठभूमि-छवि" और प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक; और चौड़ाई: 123px; ऊँचाई: 123px; (सटीक चौड़ाई / ऊंचाई का उपयोग करें)

— नाथन जेबी

Answer 2

CSS HTML नहीं है। HTML में  एक नामित चरित्र संदर्भ है; दशमलव सांख्यिक वर्ण संदर्भ के बराबर  । 160 यूनिकोड (या UCS-2 में वर्ण का दशमलव कोड बिंदु है ; HTML 4.01 विशिष्टता देखें )। उस कोड बिंदु का हेक्साडेसिमल प्रतिनिधित्व U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ) है। आप पाएंगे कि यूनिकोड कोड चार्ट और चरित्र डेटाबेस में ।NO-BREAK SPACE

CSS में आपको ऐसे वर्णों के लिए एक यूनिकोड एस्केप अनुक्रम का उपयोग करने की आवश्यकता होती है, जो किसी वर्ण के कोड बिंदु के हेक्साडेसिमल मान पर आधारित होता है। इसलिए आपको लिखने की जरूरत है

.breadcrumbs a:before {
  content: '\a0';
}

यह तब तक काम करता है जब तक कि भागने का क्रम एक स्ट्रिंग मान में आता है। यदि वर्ण अनुसरण करते हैं, तो गलत व्याख्या से बचने के दो तरीके हैं:

ए) (दूसरों द्वारा उल्लिखित) भागने के अनुक्रम के लिए ठीक छह हेक्साडेसिमल अंकों का उपयोग करें:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

ख) भागने के अनुक्रम के बाद एक सफेद-स्थान (जैसे, स्थान) वर्ण जोड़ें:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(चूंकि fएक हेक्साडेसिमल अंक है, \a0fअन्यथा GURMUKHI LETTER EEयहां मतलब होगा , या you यदि आपके पास एक उपयुक्त फ़ॉन्ट है।)

परिसीमन करने वाले श्वेत-स्थान को नजरअंदाज किया जाएगा, और यह प्रदर्शित किया जाएगा  foo, जहां यहां प्रदर्शित स्थान एक NO-BREAK SPACEचरित्र होगा।

श्वेत-स्थान दृष्टिकोण ( '\a0 foo') में छह-अंकीय दृष्टिकोण ( '\0000a0foo') से अधिक निम्नलिखित लाभ हैं :

• यह टाइप करना आसान है , क्योंकि अग्रणी शून्य आवश्यक नहीं हैं, और अंकों को गिनने की आवश्यकता नहीं है;
• यह पढ़ना आसान है , क्योंकि भागने के अनुक्रम और निम्नलिखित पाठ के बीच सफेद स्थान है, और अंकों को गिनने की आवश्यकता नहीं है;
• इसके लिए कम जगह की आवश्यकता होती है , क्योंकि प्रमुख शून्य आवश्यक नहीं हैं;
• यह ऊपर की ओर संगत है , क्योंकि भविष्य में यू + 10 एफएफएफ से परे यूनिकोड समर्थन कोड अंक सीएसएस संशोधन के संशोधन की आवश्यकता होगी।

इस प्रकार, भाग गए चरित्र के बाद एक स्थान प्रदर्शित करने के लिए, स्टाइलशीट में दो स्थानों का उपयोग करें -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- या इसे स्पष्ट करें:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

विवरण के लिए CSS 2.1, अनुभाग "4.1.3 वर्ण और केस" देखें।

Comments

+1 "बच गए चरित्र के बाद एक स्थान प्रदर्शित करने के लिए" चाल के लिए, लेकिन यह उल्लेख करना होगा कि nbsp जोड़ने और फिर एक अंतरिक्ष प्रकार nbsp के उद्देश्य को पराजित करता है;)

— TWiStErRob

@TWiStErRob नहीं, एक नॉन-ब्रेकिंग स्पेस कैरेक्टर का संयोजन जिसके बाद ब्रेकिंग स्पेस कैरेक्टर (या इसके विपरीत) दो स्पेस कैरेक्टर की चौड़ाई के बारे में एक अंतर प्रदर्शित करेगा , जबकि दो या दो से अधिक वर्बेटिम स्पेस कैरेक्टर केवल एक गैप को प्रदर्शित करेंगे। लेआउट इंजन के पार्सर के रूप में एक अंतरिक्ष चरित्र की चौड़ाई white-spaceसीएसएस संपत्ति अन्यथा घोषित नहीं होने तक एक अंतरिक्ष चरित्र में लगातार ब्रेकिंग व्हाट्सएप (न्यूलाइन सहित) का पतन करती है।

— पॉइंटएर्स

हाँ, मुझे ढहने के बारे में पता है, लेकिन nbsp की बात यह है कि यह गैर-ब्रेकिंग है, शब्द वर्ण भी डिफ़ॉल्ट रूप से गैर-ब्रेकिंग हैं, इसलिए गैर-ब्रेकिंग के बगल में एक ब्रेकिंग स्पेस को जोड़ने का कोई मतलब नहीं है, अंतिम परिणाम होगा तोड़ना। मैं बात कर रहा हूँ white-space: normal।

— ट्वीस्टरेब

@TWiStErRob कृपया मेरे उत्तर को अधिक ध्यान से पढ़ें। यह "प्रदर्शन [आईएनजी] के लिए एक उदाहरण है जो एक बच गए चरित्र के बाद एक स्थान है"। मूल कोड में एक NO-BREAK SPACEचरित्र था, इसलिए मैंने इसके लिए भागने के अनुक्रम का उपयोग किया। आप किसी अन्य भागने के क्रम को चुन सकते हैं; यदि आवश्यक हो, तो आप भी घोषणा कर सकते white-space: nowrapहैं।

— पॉइंटेडर्स

Answer 3

अपडेट : पॉइंटेडर्स का उल्लेख है कि  सभी सीएसएस स्थितियों के लिए सही स्टैंड का
'\a0 'अर्थ होगा कि अंतरिक्ष हेक्स स्ट्रिंग के लिए एक टर्मिनेटर है और बच गए अनुक्रम द्वारा अवशोषित होता है। उन्होंने आगे इस आधिकारिक विवरण को इंगित किया, जो मेरे द्वारा बताई गई समस्या और समाधान के लिए एक अच्छा समाधान है।

आपको क्या करने की आवश्यकता है बच गए यूनिकोड का उपयोग करें। आपके द्वारा बताए जाने के बावजूद, सीएसएस \00a0के  भीतर एक आदर्श स्टैंड-इन नहीं है ; इसलिए कोशिश करें:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

विशेष \0000a0रूप से उपयोग के रूप में  । यदि आप कोशिश करते हैं, जैसा कि मैथ्यू और मिलिकिन द्वारा सुझाया गया है:

content:'No\00a0Break'   /* becomes No਋reak */

यह B को हेक्स से बच गए वर्णों में ले जाता है। 0-9a-fA-F के साथ भी ऐसा ही होता है।

Comments

आपको भागने के अनुक्रम के बाद एक जगह लगाने की आवश्यकता है, जैसा कि निर्दिष्ट किया गया है '\a0 Break':। '\0000a0Break'है न विश्वसनीय।

— पॉइंटएर्स

@PointedEars दिलचस्प है, तो यह स्थान एक टर्मिनेटर है और स्ट्रिंग में शामिल नहीं होता है?

— dlamblin

देखें सीएसएस 2.1, खंड "4.1.3 वर्ण और मामले" । जो यह भी दर्शाता है कि आपका दृष्टिकोण CSS 2.1 के अनुसार विश्वसनीय होना चाहिए। लेकिन मुझे व्हॉट्सएप एप्रोच क्लीनर (ऊपर से संगत) और छोटे पदचिह्न मिलते हैं।

— प्वाइंटएडर्स

Answer 4

CSS में आपको HTML Entities के स्थान पर एक यूनिकोड एस्केप अनुक्रम का उपयोग करना होगा। यह किसी वर्ण के षोडश आधारी मूल्य पर आधारित है।

मैंने पाया कि प्रतीक को उनके हेक्साडेसिमल समतुल्य में बदलने का सबसे आसान तरीका है, जैसे कि ▾to ( ) से \25BEMicrosoft कैलकुलेटर का उपयोग करना है =)

हाँ। प्रोग्रामर मोड सक्षम करें, दशमलव प्रणाली चालू करें, दर्ज करें 9662, फिर हेक्स पर स्विच करें और आपको मिलेगा 25BE। फिर बस \शुरुआत में एक बैकस्लैश जोड़ें ।

Comments

पूरी तरह से उपयोगी होते हुए भी, यह वास्तव में सवाल का जवाब नहीं देता है इसलिए यह प्रश्न के लिए टिप्पणी के रूप में बेहतर होगा।

— dlamblin

ब्लैक राइट-पॉइंटिंग छोटा तीर (small \25B8 ▸ ▸) ftw। इसके अलावा, अधिक के लिए en.wikipedia.org/wiki/Geometric_Shapes देखें ।

— जोएल पूर्व

2Joel Purra, विकी को अधिक समय पर पढ़ा। आपने प्रतीकों को गलत समझा।

— netgoblin

@netgoblin: ऐसा कैसे? मुझे सिर्फ ब्लैक राइट-पॉइंटिंग छोटा तीर पसंद है।

— जोएल पुर्रा

मैं इस graphemica.com का उपयोग करता हूं, जहां आप दशमलव, हेक्साडेसिमल और इतने पर प्राप्त कर सकते हैं

— माइक

Answer 5

नॉन-ब्रेकिंग स्पेस के लिए हेक्स कोड का उपयोग करें। कुछ इस तरह:

.breadcrumbs a:before {
    content: '>\00a0';
}

Answer 6

वहाँ एक तरीका है nbsp- एक खुला CharMap पेस्ट और चरित्र 160 कॉपी । हालाँकि, इस मामले में मैं संभवतः इसे इस तरह से पैडिंग के साथ बाहर रखूँगा:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

आपको ब्रेडक्रंब display:inline-blockया कुछ और सेट करने की आवश्यकता हो सकती है, हालांकि।

Comments

Nbsp को चिपकाने के बजाय, मैं एक इकाई का उपयोग करने के लिए चिपक जाऊंगा, ताकि भविष्य के रखरखाव के लिए यह स्पष्ट हो जाए कि यह अंतरिक्ष के लिए अलग है।

— निक डे

दूसरी ओर, आप ब्रेडक्रंब नहीं करते हैं क्योंकि वे माना जाता है, अर्थात:> ब्रेडक्रंब के साथ प्रतीक इनलाइन होना चाहिए, न कि केवल एक दृश्य शैली। कम से कम यदि आप अपने ब्रेडक्रंब को देखने के लिए Google चाहते हैं और खोज इंजन में अपनी सूची के तहत उन्हें सूचीबद्ध करें।

— १५:३२ पर दीमक

Answer 7

उदाहरण के लिए :

http://character-code.com/arrows-html-codes.php

उदाहरण: यदि आप अपने चरित्र का चयन करना चाहते हैं, तो मैंने "& # 8620" "& # x21ac" चुना (हम HEX मानों का उपयोग करते हैं)

.breadcrumbs a:before {
    content: '\0021ac';
}

परिणाम: ↬

बस :)

Comments

मैंने सामग्री का उपयोग किया: '\ 10095'; । लेकिन आउटपुट नहीं दिखा रहा है। आइकन के बजाय, यह आयत दिखा रहा है।

— कपिल

Answer 8

मुझे पता है कि यह एक बहुत पुरानी पोस्ट है, लेकिन यदि रिक्ति आपके सभी के बाद है, तो बस क्यों नहीं:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

मैंने पहले भी इस विधि का उपयोग किया है। यह मेरे परीक्षण में अपनी तरफ से ">" के साथ अन्य लाइनों के लिए पूरी तरह से ठीक है।

Answer 9

यहाँ दो तरीके हैं:

• HTML में:

  <div class="ics">&#9969;</div>

यह ⛱ में परिणाम होगा

• सीएसएस में:

  .ics::before {content: "\9969;"}

HTML कोड के साथ <div class="ics"></div>

यह भी ⛱ में परिणाम है

Comments

सही उत्तर है .ics :: {सामग्री: '\ 9969'; से पहले;}

— मार्को स्कर्नाट्टो