रोकथाम: अगली पंक्ति में लपेटने से तत्व के बाद

Question 1

मेरे पास यह HTML है:

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

मैं एक आइकन का उपयोग कर रहा हूँ: छद्म तत्व के बाद:

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

समस्या: यदि उपलब्ध चौड़ाई बहुत छोटी है, तो आइकन अगली पंक्ति में जाता है। मैं यह चाहूंगा कि वह उसी पंक्ति पर बने रहें जिस लिंक से अंतिम शब्द जुड़ा है:

यहाँ छवि विवरण दर्ज करें

क्या यह उल्लेखनीय है, पूरे लिंक में 'नोवरैप' जोड़े बिना (मैं शब्दों को लपेटना चाहता हूं, सिर्फ आइकन नहीं)।

JsFiddle यहाँ देखें ।

Question 2

आप इसके बजाय अंतिम शब्द में छवि जोड़ सकते हैं। जो इसे एक साथ तोड़ देगा।

शब्द में एक वर्ग जोड़ें <strong class="test">word</strong>

तथा .test:after { ...

http://jsfiddle.net/52dkR/

चाल उस वर्ग को बनाने के लिए भी है inline-block

और अगर आप इस बात को रेखांकित करना चाहते हैं।

http://jsfiddle.net/atcJJ/

जोड़ना text-decoration:inherit;

Question 3

JSFiddle - http://jsfiddle.net/Bk38F/65/

इसकी चौड़ाई की भरपाई करने के लिए, छद्म तत्व के लिए एक नकारात्मक मार्जिन जोड़ें:

ul li.completed a:after {
    background:transparent url(img1.png) no-repeat; 
    content: ' ';
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: -24px;
}

अब, कि आइकन कंटेनर को ओवरफ्लो करने जा रहा है, और लाइन केवल तभी टूटने वाली है जब टेक्स्ट लाइन के अंत को पूरा करता है। यदि आपको मूल कंटेनर चौड़ाई के अंदर आइकन बनाए रखने की आवश्यकता है, तो आप फिर से क्षतिपूर्ति करने के लिए पैडिंग जोड़ सकते हैं:

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

महत्वपूर्ण अद्यतन:

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

<span>text goes here</span>

और यह नहीं है :

<span>
    text goes here
</span>

Question 4

यह पिछले उत्तर के समान है, लेकिन मैंने सोचा कि मैं इसे बाहर निकाल दूंगा और इसे पूरी तरह से समझाऊंगा।

जैसे ही आप सेट करते हैं display: inline-block, :afterएक गैर-पाठ-बाध्यकारी तत्व बन जाता है। यही कारण है कि यह लपेटता है, और क्यों nowrap कोई प्रभाव नहीं है। इसलिए छोड़ दोdisplay अकेला ।

जब तक यह डिफ़ॉल्ट रूप से एक पाठ तत्व है, तब तक सामग्री पिछले पाठ को बांध देती है, जब तक कि उनके बीच कोई व्हाट्सएप न हो। तो कोई जोड़ नहीं है, लेकिन सुनिश्चित करें कि आपके पास है content: "", या जैसा है वैसा ही है display: none। एकमात्र समस्या यह है heightऔर widthइसके द्वारा नियंत्रित होती है content, जो इस मामले में ढह जाती है। तो widthहै 0, औरheight लाइन ऊंचाई है।

पैडिंग के साथ क्षेत्र का आकार बदलें; बाएं या दाएं, कोई फर्क नहीं पड़ता। थोड़ा जोड़ें marginतो आइकन पाठ को स्पर्श नहीं करता है। सब कुछ रिश्तेदार आकार ( emऔर pt, आदि) के रूप में रखें , और उपयोग करें background-size: contain, ताकि आइकन पाठ के साथ एक इमोजी या फ़ॉन्ट की तरह तराजू। अंत में उस आइकन को रखें जहाँ आप चाहते हैं background-position।

ul li.completed a:after {
  content: "";
  background: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em; /* spacing*/
  padding-right: 0.75em; /* sizing */
}

मैंने इसे अपने बाहरी लिंक ( a[href*="://"]:after) के लिए उपयोग किया है , और यह फ़ायरफ़ॉक्स, क्रोम और iOS में ठीक काम किया है। और चूंकि आइकन एक टेक्स्ट एलिमेंट बना हुआ है, यहां तक कि इसे बाइंड करने के बाद डायरेक्ट टेक्स्ट भी।

Question 5

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

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last word</a></li></ul>

ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}

http://jsfiddle.net/atcJJ/36/

Question 6

यदि एक आइकन फ़ॉन्ट का उपयोग कर रहे हैं: \00a0छद्म तत्व सामग्री (इस मामले में एक फ़ॉन्ट विस्मयकारी ग्लिफ़) के साथ "नॉन-ब्रेकिंग स्पेस" यूनिकोड का उपयोग करना ।

यह बिना किसी अतिरिक्त मार्क-अप या विशेष स्वरूपण या वर्गनाम के काम करता है।

a[href^='http']::after {
  content: '\00a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

line-height: 0;अंतिम 'शब्द + आइकन' लपेटने पर यह भाग लाइनों को घुमाता रहता है।

कोड उदाहरण

Question 7

कृपया सुनिश्चित करें कि आपने पहले टैग को समाप्त कर दिया है

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></a></li></ul>

नीचे सीएसएस की कोशिश करो। पहले "उपयोग" के बाद "के बाद" का उपयोग करने के बजाय और दाएं फ्लोट करें।

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

कृपया इसे देखें: http://jsfiddle.net/supriti/atcJJ/7/

Question 8

इसके बिना करना संभव है :after। पृष्ठभूमि वाला तत्व होना चाहिए display:inline।

<h1><span>I want the icon to stay on the same line as this last word</span></h1>

h1 span {
   padding-right: 24px;
   background: url('icon.svg') no-repeat right top; 
}

http://jsfiddle.net/my97k7b1/

Question 9

मैं एक लिंक बटन के साथ यह कोशिश कर रहा था और तत्व के दाईं ओर पैडिंग जोड़ने के साथ सबसे अधिक सफलता मिली थी जैसा कि @Hugo सिल्वा ने सुझाव दिया था, फिर :: पूर्ण स्थिति के बाद :: सेट करना। यह एक बहुत ही सरल समाधान था और आधुनिक ब्राउज़रों में काम करना प्रतीत होता था।

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

यहां जेएस फिडल है।

Question 10

समस्या तब होती है जब तत्व के पाठ के अंत में व्हाट्सएप होता है, इसलिए यह आइकन को दूसरे शब्द के रूप में मानता है। मेरा समाधान जावास्क्रिप्ट के साथ सफेद स्थान को हटाने और तत्व के बाहर रखना है। इसके अलावा, हम इस text-decoration:underlineशैली से बचते हैं कि सफेद स्थान जो एक लिंक के अंत में हो सकता है:

$(document).ready(function () {
  $("a[href$=\".pdf\"]").each(function () {
    var endspace = /\s$/;
    if (endspace.test($(this).html())) {
      var linktx = $(this).html().replace(/\s*$/, "");
      $(this).html(linktx);
      $(this).after(" ");
    }
  });
});

सीएसएस में मैं \00A0टेक्स्ट से अलग करने के लिए आइकन से पहले एक गैर-ब्रेकिंग स्पेस जोड़ता हूं , और फ़ॉन्ट-आकार के अनुसार स्केल करता हूं । कुछ मामलों में, संकरी नो-ब्रेक स्पेस का उपयोग करना\202F बेहतर दृश्य प्रभाव प्रदान करता है:

a[href$=".pdf"]:after {
  content: "\00A0\f1c1";
  font-family: "Font Awesome 5 Pro";
}

https://jsfiddle.net/poselab/910bw7zt/8/

Question 11

मेरे विशेष सेट अप के साथ, एकमात्र काम करने वाला समाधान स्थिति सापेक्ष का उपयोग करना था, और एक स्थान निरपेक्ष के साथ एक अवधि में मेरे आइकन तत्व को रखना। इस तरह:

h2 a {
            position: relative;
            width: auto;
}
h2 a span {
            position: absolute;
            right: -30px;
            bottom: 0;
 }

<h2>
    <a href="#">
            The arrow won't drop to the next line as an orphan, even if the text is long and responsive
         <span>&#8594;</span>
    </a>
</h2>

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