2013-02-13 17 views
8

में "पहले" के बाद लाइन ब्रेक से बचने के लिए कैसे करें मेरी वेबसाइट पर मैं कुछ लिंक प्रकारों के लिए फ़ॉन्ट आइकन का उपयोग कर रहा हूं। ये आइकन :before सीएसएस सिंटैक्स के माध्यम से जोड़े गए हैं।सीएसएस

a.some-link:before { 
    font-family: icons; 
    display: inline-block; 
    padding-right: 0.3em; 
    content: 'x'; 
} 

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

Separated icon from link

मैं ऊपर सीएसएस नियम के white-space: nowrap जोड़ने की कोशिश की, लेकिन वह नहीं था मदद।

मैं आइकन और टेक्स्ट को एक साथ कैसे रखूं? (सीएसएस 3 है ठीक)

नोट: मैं white-space: nowrap साथ पूरे लिंक फ़ॉर्मेट करने के लिए नहीं करना चाहती।

a.some-link:before { 
    font-family: icons; 
    padding-right: 0.3em; 
    content: 'x'; 
} 

JSFiddle:

उत्तर

8

आप को दूर करने display:inline-block; इस समस्या को हल करने के लिए लगता है।

दुर्भाग्यवश, आपको एसवीजी दिखाने के लिए "डिस्प्ले: इनलाइन-ब्लॉक" की आवश्यकता है। सरल समाधान "ए" पर "डिस्प्ले: इनलाइन-ब्लॉक" डालना है। यह आपके एसवीजी को सही ढंग से प्रस्तुत करने का कारण बनता है और यह आपके एक को पहले और एक साथ एक पंक्ति पर रखेगा।

2

यह :before सीएसएस के लिए nowrap नियम जोड़ने के लिए बेहतर है:

white-space: nowrap; 

युपीडी: http://jsfiddle.net/MMbKK/5/

nowrap शासन के लिए कारण :before में छवि सामग्री के साथ ठीक से काम करने के लिए है। मुख्य तत्व के पास रहने के लिए टेक्स्ट सामग्री को इस नियम की आवश्यकता नहीं है।

+3

कोई विशेष कारण यह बेहतर क्यों है? आपको लगता है कि आपको थोड़ा और जवाब देना चाहिए। –

+0

ओपी निर्दिष्ट है कि वे 'अब्रैप' समाधान की तलाश नहीं कर रहे हैं। – indivisible

+0

उह, क्षमा करें, मैं इस समुदाय के लिए नया हूं और पहले अधिसूचना नहीं देखी थी। 'अब्रैप' अंदर ': पहले' सीएसएस नियम मेरे मामले में काम करता था। हो सकता है कि यह केवल मेरे मुख्य ब्राउज़र में ही हो। 'a.tooltipWord: { सामग्री से पहले: url ('..../quest_min.gif'); सफेद-स्थान: अब्रैप; } ' ओह, मैं पर्याप्त स्पष्ट नहीं था, अब मैं इसे देखता हूं। बिंदु 'इनलाइन-ब्लॉक' नियम को 'अब्रैप' में बदलना था, उन्हें जोड़ने के लिए नहीं। – ornic