एक तत्व का उपयोग करके एक स्थान ("") जोड़ें: के बाद

Question

मैं कुछ सामग्री के बाद एक रिक्त स्थान जोड़ना चाहता हूं, हालांकि यह content: " ";काम नहीं करता है।

यह मेरा कोड है:

h2:after {
    content: " ";
}

... जो काम नहीं करता है, हालांकि यह करता है:

h2:after {
    content: "-";
}

मैं क्या गलत कर रहा हूं?

Comments

मैं अपेक्षित परिणाम नहीं समझता। आप जोड़ने के लिए कोशिश कर रहे हैं paddingका उपयोग कर content। ऐसा लगता है कि यह बताना असंभव होगा कि क्या अंतरिक्ष को जोड़ा गया था।

— fncomp

यह एक अजीब सवाल है, आपको अंतरिक्ष जोड़ने के लिए पैडिंग का उपयोग करना चाहिए , कोई सामग्री नहीं : बाद में , शायद आपको प्रदर्शन के बीच अंतर के बारे में पता नहीं है: इनलाइन और प्रदर्शन: ब्लॉक?

— लिटिलमैड

मैं सामग्री के माध्यम से पैडिंग जोड़ने की कोशिश कर रहा हूं।

— bradley.ayers

मैंने पाया कि इस पद्धति का उपयोग करते हुए एक स्थान जोड़ना भी उपयोगी था जब overflow: hiddenएक ब्लॉक तत्व इटैलिक पाठ के अंतिम चरित्र के कुछ पिक्सेल को काट देगा। पैडिंग इस मामले में मदद नहीं करेगा।

— जो वालर

यदि आप चाहते हैं कि आपके स्थान का उपयोग करके रेखांकित किया जाए तो पैडिंग मदद नहीं करता है text-decoration: underline;।

— dmitry_romanov

Answer 1

व्याख्या

यह ध्यान देने योग्य है कि आपका कोड एक स्थान सम्मिलित करता है

h2::after {
  content: " ";
}

हालाँकि, इसे तुरंत हटा दिया गया है।

से बेनामी इनलाइन बक्से ,

सफेद स्थान की सामग्री जो बाद में 'व्हाइट-स्पेस' संपत्ति के अनुसार ढह जाती है, कोई भी अनाम इनलाइन बॉक्स उत्पन्न नहीं करती है।

और 'व्हाइट-स्पेस' प्रोसेसिंग मॉडल से ,

यदि किसी पंक्ति के अंत में एक स्पेस (U + 0020) में 'व्हाइट-स्पेस' को 'सामान्य', 'नॉवरैप' या 'प्री-लाइन' पर सेट किया जाता है, तो उसे भी हटा दिया जाता है।

उपाय

इसलिए यदि आप नहीं चाहते हैं कि अंतरिक्ष को हटा दिया जाए, या सेट white-spaceकर दिया जाए ।prepre-wrap

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

गैर-ब्रेकिंग स्पेस (U + 00a0) का उपयोग न करें। उन्हें शब्दों के बीच लाइन ब्रेक को रोकने के लिए माना जाता है। उन्हें गैर-बंधनेवाला स्थान के रूप में उपयोग नहीं किया जाना चाहिए, यह शब्दार्थ नहीं होगा।

Comments

ऐसा लगता है कि white-spaceiE11 और न ही एज में समर्थित नहीं है ( caniuse.com/#search=white-space देखें )। इसलिए उपयोगकर्ता bradley.ayers द्वारा उत्तर बेहतर है? (मैं नहीं जानता, शब्दार्थ या लाइन-ब्रेक व्यवहार जैसे अन्य पहलू हैं)

— chimos

Answer 2

यह यूनिकोड के माध्यम से निर्दिष्ट किए जाने की आवश्यकता है। यह प्रश्न संबंधित है और इसमें उत्तर है।

समाधान:

h2:after {
    content: "\00a0";
}

Comments

लायक कुछ भी नहीं है कि यह एक गैर-स्थान को जोड़ देगा। यदि आप एक सामान्य स्थान चाहते हैं, तो आपको "\ 00A0" के बजाय "\ _20" चाहिए।

— ओपलीन

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

— मुईम

@ ओफ्लिन कृपया एक अलग उत्तर के रूप में `\ 0020` जोड़ें क्योंकि कुछ फोंट, उदाहरण के लिए फ़ॉन्ट बहुत बढ़िया \00A0एक स्थान प्रदर्शित करने की अनुमति नहीं देगा , और यदि आप पहले या बाद में तत्वों के बीच एक स्थान चाहते हैं तो आप पैडिंग का उपयोग नहीं कर सकते

— माउस

आप उस चीज़ के बाद स्थान कैसे जोड़ते हैं जो पहले से ही सामग्री में है?

— १६:१६

@ फ्रांस्वाडुपोंट, क्या आपके पास इस परिवर्तन का वर्णन करने वाला संसाधन है?

— isherwood

Answer 3

मुझे पैडिंग का उपयोग करने के बजाय इसकी आवश्यकता थी क्योंकि मैं वर्कफ़्लो समयरेखा में व्यक्तिगत घटनाओं की एक श्रृंखला प्रदर्शित करने के लिए इनलाइन-ब्लॉक कंटेनरों का उपयोग करता था। समयरेखा में अंतिम घटना को इसके बाद किसी तीर की आवश्यकता नहीं थी।

कुछ इस तरह समाप्त हुआ:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

Gt (शेवरॉन) वर्ण के लिए उपयोग किया गया फ़ॉन्टवॉटर। जो भी कारण के लिए "सामग्री: कोई नहीं;" अंतिम टाइल पर संरेखण मुद्दों का उत्पादन कर रहा था।