सीएसएस में पहला पात्र अपरकेस बनाएं

255

क्या सीएसएस में एक लेबल में पहला चरित्र अपरकेस बनाने का एक तरीका है ।

यहाँ मेरा HTML है:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

स्निपेट का विस्तार करें

css

— जीवन का आनंद लें
स्रोत

2

निर्दिष्ट करने के लिए - पहला चरित्र और केवल पहला वाला। जो text-transform: capitalize;कई शब्द होने पर पर्याप्त नहीं है

— wiktus239

622

इसके लिए एक संपत्ति है:

a.m_title {
    text-transform: capitalize;
}

यदि आपके लिंक में कई शब्द हो सकते हैं और आप केवल पहले शब्द के पहले अक्षर को अपरकेस बनाना चाहते हैं, तो :first-letterइसके बजाय एक अलग परिवर्तन के साथ उपयोग करें (हालांकि यह वास्तव में कोई फर्क नहीं पड़ता)। ध्यान दें कि क्रम में के लिए :first-letterकाम करने के लिए अपने aतत्वों ब्लॉक कंटेनर होने की जरूरत है (हो सकता है जो display: block, display: inline-blockया एक या अधिक प्रॉपर्टी की अन्य संयोजन की एक किस्म के किसी भी):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

— बोल्टकॉक
स्रोत

3

@alanjds: हाँ, यह IE के हर संस्करण में काम करता है जो CSS का समर्थन करता है। यह बहुत पुरानी तकनीक है।

— BoltClock

3

आप एक डबल अर्द्ध बृहदान्त्र उपयोग करने के लिए चाहते हो सकता है, को देखने के css-tricks.com/almanac/selectors/f/first-letter

— ndequeker

5

@Voles: यकीन है कि अगर आप IE8 और पुराने का समर्थन करने की जरूरत नहीं है। यदि आप चाहते हैं तो आप दोहरे कॉलनों का उपयोग नहीं कर सकते हैं। (क्या यह की कीमत, इस सवाल का जवाब है जो 2 और एक आधे साल पहले पोस्ट किया गया था के समय में, मेरी निजी नीति के लिए था डिफ़ॉल्ट रूप से IE8 समर्थन करने के लिए आज मैं अब से करते हैं।।)

— BoltClock

1

ध्यान दें, यदि display: blockआवश्यकता (जो जानता है कि क्यों है) यह मुश्किल बनाता है, :first-letterसाथ काम भी करता है display: inline-block।

— मित्या

1

@ हेनरी गार्सिया डी गुज़मैन: क्योंकि वह सब कुछ ऊपर उठाता है, न कि केवल पहला अक्षर (प्रत्येक शब्द या वाक्य या जो कुछ भी)।

— BoltClock

55

ध्यान दें कि ::first-letterचयनकर्ता इनलाइन तत्वों के साथ काम नहीं करता है, इसलिए यह निम्नानुसार blockया तो होना चाहिए inline-block:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

— Logus
स्रोत

1

मेरे मामले में पूरा पाठ पहले से ही राजधानियों में था, इसलिए मुझे पाठ-परिवर्तन जोड़ना पड़ा: लोअरकेस टू .m_title और अब यह पूरी तरह से काम करता है!

— हिलेर

34

सीएसएस: पहला अक्षर चयनकर्ता

या:

text-transform: capitalize;

— अमृत एल्गारही
स्रोत

15

मैं उपयोग करने का सुझाव देता हूं

#selector {
    text-transform: capitalize;
}

या

#selector::first-letter {
    text-transform: uppercase;
}

वैसे, इस w3schools लिंक की जाँच करें: http://www.w3schools.com/cssref/pr_text_text-transform.asp

— मौरिज़ियो बत्तघिनी
स्रोत

2

अच्छा जवाब, लेकिन यह सबसे निश्चित रूप से w3c प्रलेखन के लिए एक कड़ी नहीं है।

— Stephan

1

कृपया ध्यान दें: पाठ-रूपांतर 'प्रारंभिक' का अर्थ 'पहला अक्षर बड़ा करना' नहीं है। बल्कि, इसका मतलब है 'इस संपत्ति के लिए प्रारंभिक, डिफ़ॉल्ट मूल्य पर वापस लौटना'।

— मार्कोस बुर्के

धन्यवाद, मैंने दोनों अनुशंसित सुधारों को लागू किया है।

— मार्कोस बुर्के

5

इसे पहले नीचे करें:

.m_title {text-transform: lowercase}

फिर इसे पहला अक्षर बड़ा करें:

.m_title:first-letter {text-transform: uppercase}

"टेक्स्ट-ट्रांसफॉर्म: कैपिटलाइज़" एक शब्द के लिए काम करता है; लेकिन अगर आप वाक्यों के लिए उपयोग करना चाहते हैं तो यह समाधान एकदम सही है।

— OzgurG
स्रोत

2

: पहला अक्षर inlineतत्वों के साथ काम नहीं करता है , display:inline-blockअगर यह आपका मामला है तो सेट करें। ( stackoverflow.com/questions/7631722/… )

— फंकी

1

<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

— ज्ञान सेकर
स्रोत

यह मेरा काम है अवधारणा .. प्रदर्शन में प्रत्येक शब्द पहले अक्षर कैप्स

— Gnana Sekar

-2

मैं अनुशंसा करूंगा कि आप CSS में निम्न कोड का उपयोग करें:

    text-transform:uppercase;

सुनिश्चित करें कि आप इसे अपनी कक्षा में रखें।

— केविन डेविस
स्रोत