एक पाठ के रूप में दिखाई देता है एक HTML पृष्ठ पर इस प्रकार मान लीजिए (सिर्फ एक शब्द बहुत लंबा एक लाइन पर फिट करने के लिए):सीएसएस के साथ आखिरी पंक्ति पर मैं एक शब्द से कैसे बच सकता हूं?
Lorem ipsum dolores amet foo
bar
कैसे एक है कि अंतिम शब्द पिछले पंक्ति में दिखाई दे सीएसएस के साथ से बच सकते हैं, और बल दो (या अधिक)?
Lorem ipsum dolores amet
foo bar
मुझे नहीं लगता कि आप शुद्ध सीएसएस में ऐसा कर सकते हैं।
आप या तो पिछले दो शब्दों के बीच में एक नॉन-ब्रेकिंग स्पेस डाल करने के लिए होगा:
foo bar
या में एक span पिछले दो शब्द डाल:
<span style="white-space: nowrap">foo bar</span>
नहीं हो सकता सीएसएस के साथ किया गया, लेकिन शॉन इनमैन ने थोड़ी देर पहले इस मदद के लिए जावास्क्रिप्ट का एक बहुत उपयोगी बिट लिखा:
http://www.shauninman.com/archive/2006/08/22/widont_wordpress_plugin
यह एक वर्डप्रेस प्लगइन है, लेकिन वहां बहुत सारे गैर-वर्डप्रेस क्लोन हैं।
शॉन द्वारा यह पोस्ट 2006 से है, मेरी राय में थोड़ा सा भरोसा है। – bart
आयु कोई फर्क नहीं पड़ता - यह एक बहुत ही सरल जावास्क्रिप्ट पैटर्न है जो इसे तैयार किए जाने पर काम करता है, और इस दिन काम करना जारी रखता है। –
समझ में नहीं आता कि यह जवाब क्यों दिया गया है।कुछ साल के होने के बावजूद, शॉन का कोड अभी भी बहुत प्रासंगिक है। इसकी उम्र के कारण किसी चीज़ की वैधता को नजरअंदाज करने के लिए थोड़ा हास्यास्पद लगता है। –
बस इस निर्भरता से मुक्त जे एस स्निपेट होता है, यह बहुत ही समस्या
https://github.com/ajkochanowicz/BuddySystem
का समाधान होगा अनिवार्य रूप से इस स्रोत कोड
var buddySystem=function(e){var n=[],r=[]
n=e.length?e:n.concat(e),Array.prototype.map.call(n,function(e){var n=String(e.innerHTML)
n=n.replace(/\s+/g," ").replace(/^\s|\s$/g,""),r.push(n?e.innerHTML=n.replace(new RegExp("((?:[^ ]*){"+((n.match(/\s/g)||0).length-1)+"}[^ ]*) "),"$1 "):void 0)})}
है और आप इस
करके इसे लागू कर सकते हैं लिखा थाobjs = document.getElementsByClassName('corrected');
buddySystem(objs);
अब आपके पास कभी नहीं होगा corrected कक्षा के साथ किसी भी टैग के लिए स्वयं द्वारा शब्द।
यदि आप चाहें तो jQuery का भी उपयोग कर सकते हैं।
$(".corrected").buddySystem()
चेक बाहर सभी संभावनाओं के लिए लिंक।
मैं इस समाधान को केवल अंतिम स्थान को प्रतिस्थापित करने के लिए कैसे प्राप्त कर सकता हूं लेकिन 2 या अधिक अंतिम शब्दों के बीच सभी रिक्त स्थान? – TheStoryCoder
@TheStoryCoder ऊपर मेरा समाधान चेकआउट करें। मैंने इसके लिए जेएस फिडल के लिए एक लिंक जोड़ा है। – Jack
मुझे नहीं लगता कि यह अकेले सीएसएस में किया जा सकता है, लेकिन यह है कि मैं प्रति पंक्ति समस्या के एक शब्द को हल करने के लिए आया हूं। यह सभी मिलान किए गए तत्वों के लिए एक गैर ब्रेकिंग स्पेस के साथ अंतिम एन रिक्त स्थान को प्रतिस्थापित करेगा।
https://jsfiddle.net/jackvial/19e3pm6e/2/
function noMoreLonelyWords(selector, numWords){
// Get array of all the selected elements
var elems = document.querySelectorAll(selector);
var i;
for(i = 0; i < elems.length; ++i){
// Split the text content of each element into an array
var textArray = elems[i].innerText.split(" ");
// Remove the last n words and join them with a none breaking space
var lastWords = textArray.splice(-numWords, numWords).join(" ");
// Join it all back together and replace the existing
// text with the new text
var textMinusLastWords = textArray.join(" ");
elems[i].innerHTML = textMinusLastWords + " " + lastWords;
}
}
// Goodbye lonely words
noMoreLonelyWords("p", 3);
तो जावास्क्रिप्ट एक विकल्प है, एक typogr.js नामक JavaScript "typogrify" कार्यान्वयन का उपयोग कर सकते हैं। इस विशेष फिल्टर को Widont कहा जाता है।
<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script>
<script>
document.body.innerHTML = typogr.widont(document.body.innerHTML);
</script>
</body>
मुझे आश्चर्य है कि क्या इसका नाम उसी नाम के वर्डप्रेस प्लगइन से संबंधित है। (दोनों को खराब नाम दिया गया है - इन चीजें * विधवा नहीं हैं।) – BoltClock
टाइपोग्राफ की तरह दिखता है शॉन इनमान के मूल के रूप में कार्यान्वयन, इसलिए ... मुझे लगता है कि मुझे पता है कि उंगली को किसने इंगित किया है। – BoltClock
+1। इस तरह की चीज को थोड़ा जावास्क्रिप्ट के साथ भी आसानी से स्वचालित किया जा सकता है। – keithjgrant