मैं HTML टेक्स्ट अनाथों को कैसे रोक सकता हूं?

Question

मैं अक्सर एक छवि है कि मैं चारों ओर पाठ लपेट, और कभी कभी ग्रंथों awkwardly लपेटता, जैसे इतना:

HTML में, छवि बाईं ओर जारी है और पाठ केवल इस प्रकार है:

<p><img style="float:left;" src="/images/[image]" /></p> 
<p>This is my David Copperfield, <em>I was born</em> kind of bio.  For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p> 
... 

यह ज्यादातर काम करता है, सिवाय इसके कि जब पाठ की लंबाई छवि के निचले हिस्से में चलने के लिए होती है और बाएं हाशिए पर वापस बहती है, और जब टेक्स्ट की मात्रा एक से अधिक पंक्तियों को भरने के लिए पर्याप्त नहीं होती है (इस मामले में, यह केवल एक शब्द है)। जब ऐसा होता है, तो यह वास्तव में बुरा लगता है।

तो, क्या पाठ प्रवाह को नियंत्रित करने का कोई तरीका है ताकि ऐसा न हो?

Answer 1

क्या तुम कर सकते हो p टैग जहां पाठ नहीं है करने के लिए overflow: hidden जोड़ने है:, पैराग्राफ के बीच खाली लाइनों को हटाने, हालांकि यह एक प्रमुख लेआउट परिवर्तन (हालांकि शायद एक अच्छा एक) होगा द्वारा। इससे ऐसा कोई टेक्स्ट हो जाएगा जो छवि के बाद बड़े हिस्से के साथ होगा। अब जब आपके पास बड़े पैराग्राफ हैं तो यह मजाकिया लग सकता है, हालांकि यदि आपके पैराग्राफ सभी काफी कम हैं तो इससे मदद मिलनी चाहिए।

उदाहरण: http://jsfiddle.net/8ZsKy/2/

बारी-बारी से तुम सिर्फ एक वर्ग नियम जोड़ सकते हैं और करने के लिए संभावित "समस्या" पैराग्राफ में यह लागू हो सकते हैं।

p.wrap-inline { 
    overflow:hidden; 
} 

संपादित: अद्यतन jsfiddle (उफ़)

Answer 2

<img style="float:left; clear="both" src="/images/[image]" /> 

Answer 3

यह सवाल वास्तव में मुझे सोच हालांकि यह कभी कभी वास्तव में कष्टप्रद है, अतीत में मैं लाइन ऊंचाई एक छोटे से समायोजित करके इस के लिए इसी तरह की समस्याओं तय कर दी है,

line-height:20px; 

या वास्तविक आकार को एडजस्ट करने के लिए किया था छवि एक छोटे को बड़ा या छोटा,

<img style="float:left;" src="/images/[image]" width="100" height="200" /> 

या पाठ की ट्रैकिंग को बदलने की

letter-spacing: 0.1em; 

उपयोग या हायफ़नेशन (मुझे यह पसंद है या इसकी सलाह नहीं देते)

hyphens: auto; 

हालांकि जहां तक ​​मेरी जानकारी के लिए चला जाता है मैं पाठ अनाथों को खत्म करने के लिए किसी भी सीएसएस नियमों का पता नहीं है। स्क्रिप्ट हो सकती है लेकिन मैंने इसके बारे में कभी नहीं सुना है और कुछ समय पहले इस पर थोड़ा सा शोध किया है। उम्मीद है कि यह मदद की :)

Answer 4

यह कैसे तैरता काम करता है। यदि आप यह नहीं चाहते हैं, तो float का उपयोग न करें; आप उदा। इसके बजाए पोजिशनिंग का उपयोग करें, ताकि पाठ छवि के दाईं ओर एक ब्लॉक के रूप में दिखाई दे।

दुर्भाग्य से फ़्लोटिंग और अनुरोध का उपयोग करने का कोई तरीका नहीं है उदा। कि अंतिम पंक्ति कम नहीं होना चाहिए। आप अपने अंतिम शब्द को इसके पहले और पिछले शब्द के बीच नो-ब्रेक स्पेस का उपयोग करके स्वयं की रेखा पर दिखाई देने से रोक सकते हैं। it will। और आप इसे संक्षिप्त शब्दों के समूह में बढ़ा सकते हैं। लेकिन इसका मतलब यह होगा कि समूह अपनी खुद की एक रेखा पर दिखाई देता है और पिछली रेखा संगत रूप से कम है (और इसलिए अजीब लग सकती है)।

यदि पाठ थोड़ा सा लंबा है, तो आप इसके प्रतिपादन को लंबवत रूप से कम स्थान लेने के लिए संशोधित कर सकते हैं उदा।

p { margin: 0 } 
p + p { text-indent: 1.3em; }