प्रदर्शन पहले अक्षर केवल

Question

कहते हैं कि यह मार्कअप चलें 'टी इसे प्रयोग खत्म, लेकिन मैं इस बारे में उत्सुक हूँ, यकीन है कि बाद में मददगार हो सकता है)

तो यह मेरा एक प्रयास किया गया था:

#socialMedia .Twitter{ 
    display:none; 
} 
#socialMedia .Twitter:first-letter { 
    display: block !important; 
} 

मैं यह जांचने में सक्षम था कि यह इसे प्राप्त नहीं करेगा। प्रश्न क्यों है? और क्या इसके आसपास कुछ काम है?

-EDIT-

= + 7/8 संस्करण सक्षम समाधान हम IE के लिए देख रहे हैं ..

Salut

Answer 1

संपादित करें: अस्वीकरण: यह टिप्पणियों के अनुसार काम नहीं करता है। कृपया यह जांचने के बिना उपयोग न करें कि यह आपकी आवश्यकताओं के अनुरूप है।

आप :first-letter छद्म तत्व के लिए विनिर्देश को चेक करते हैं, तो आप देखेंगे निम्नलिखित:

: पहला अक्षर छद्म तत्व एक ब्लॉक की पहली पंक्ति के पहले अक्षर का चयन करना होगा , अगर यह किसी अन्य सामग्री (जैसे छवियों या इनलाइन टेबल) से पहले नहीं है, तो इसकी रेखा पर।

यहां महत्वपूर्ण शब्द "ब्लॉक" है।

आप Twitter की कक्षा के साथ <a/> टैग पर छद्म-तत्व का उपयोग करने का प्रयास कर रहे हैं। डिफ़ॉल्ट रूप से, एंकर टैग इनलाइन तत्व होते हैं (ब्लॉक स्तर तत्व नहीं)।

अपने दिए गए मार्कअप के लिए, आपकी समस्या का एक ही समाधान लंगर इस तरह से शैली होगा:

.Twitter { 
    display:block; 
    visibility:hidden; 
} 

.Twitter:first-letter { 
    visibility:visible; 
}​ 

मुझे यकीन है कि आप के लिए वास्तव में क्या जा रहे हैं नहीं कर रहा हूँ, लेकिन यह है कि परीक्षण के लिए काफी अच्छा है । यहां एक डेमो देखें: http://jsfiddle.net/H7jhF/।इस तरह

Answer 2

क्या आप कर रहे हैं एक माता पिता के तत्व छिपा और दिखाने की कोशिश की तरह है अपने बच्चों में से एक, यह काम नहीं करेगा क्योंकि माता-पिता की शैली इसे ओवरराइड करती है। काम करने के लिए मूल तत्व को ब्लॉक स्तर तत्व भी होना चाहिए। a टैग पर div या p टैग, या display: block; की तरह।

एचटीएमएल

<div id="socialMedia"> 
    <a class="Twitter">Twitter</a> 
</div> 

सीएसएस

body { 
    background-color:#FFF; 
} 
.Twitter{ 
    display: block; 
    color:#FFF; 
} 
.Twitter:first-letter { 
    color:#000; 
} 

Answer 3

क्यों न सिर्फ जावास्क्रिप्ट का उपयोग करें और एक सरणी में स्ट्रिंग विभाजित है और सरणी में पहला आइटम का उपयोग करें:

यहाँ कुछ रंग का उपयोग है। या charAt()

Answer 4

कोशिश कुछ:

.Twitter { 
 
    font-size: 0; 
 
} 
 

 
.Twitter:first-letter { 
 
    font-size: 12px; 
 
}

<div class="Twitter">Twitter</div>

हो सकता है कि यह सबसे अच्छा समाधान नहीं है, लेकिन यह काम करता है।

Answer 5

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

मुझे छिपा तत्वों के बिना ऐसा करने का एक मजेदार तरीका मिला। यह चाल पूरे शब्द को लगभग कुछ भी कम करने के लिए है और फिर केवल पहला अक्षर उड़ाएं। यह ओपी की तरह कुछ करने की कोशिश कर रहा था, लेकिन यह काम करता है क्योंकि यह display: none की बजाय निरंतर स्पेक्ट्रम पर काम कर रहा है जो बस इसके अंदर कुछ भी बंद कर देता है। (एक एनालॉग> डिजिटल स्थिति का प्रकार।)

Demo

HTML:

<div>Ding Dong</div> and other stuff 

सीएसएस:

div { 
    font-size: 0.0000016px; 
    float: left; 
} 

div::first-letter { 
    color: red; 
    font-size: 10000000em; 
} 

परिणाम:

Answer 6

पेज बंद सामग्री को गोली मार और गतिशील सामग्री का उपयोग कर पत्र दिखाने: इस बेला में खेलने पर

.twitter{ 
    text-indent:-9999px; 
    display:block; 
    position:relative; 
} 
.twitter:before,.twitter::before{ 
    content:"T"; 
    position:absolute; 
    width:10px; 
    height:15px; 
    z-index:100; 
    text-indent:9999px; 
} 

:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Answer 7

एक और तरीका है color: transparent

.twitter{ 
 
    display: block; 
 
    color: transparent; 
 
} 
 

 
.twitter:first-letter{ 
 
    color: #000; 
 
}

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div>

उपयोग करने के लिए

JSFiddle

---

हालांकि, इस LTE IE8 के लिए काम नहीं करेगा।

संदर्भ:

• IE7 IE8 IE9 color:transparent property
• color: transparent is not working in Internet Explorer

Answer 8

यहाँ मैं क्या करना है:

.Twitter{ 
     display:block; 
     width:1ch; 
     overflow:hidden; 
     white-space: nowrap; 
    }