2010-05-14 18 views
36

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

उपर्युक्त पैराग्राफ में, मैं पहली पंक्ति के बाद स्वचालित रूप से कुछ पंक्ति को इंडेंट करने के लिए सीएसएस का उपयोग करना चाहता हूं ताकि प्रत्येक पंक्ति पहली पंक्ति में ठीक रहे।

एचटीएमएल

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p> 

यह बाहर करने के लिए सेट सूची स्थिति के साथ सूची आइटम के समान है, लेकिन मैं एक सूची का उपयोग नहीं करना चाहते हैं।

इस प्रभाव को प्राप्त करने के लिए आप क्या सोच सकते हैं सबसे आसान तरीका है? कम अतिरिक्त एचटीएमएल मार्कअप बेहतर होगा।

आप सभी को बहुत धन्यवाद।

उत्तर

61

आपको text-indent की आवश्यकता है। आम तौर पर text-indent पहली पंक्ति को आगे बढ़ाता है, लेकिन यदि आप इसे कम से कम आकृति देते हैं और सकारात्मक मार्जिन का उपयोग करते हैं, तो आप उसके बाद के प्रभाव को प्राप्त कर सकते हैं।

text-indent: -10px; 
margin-left: 10px 
+7

पैडिंग का उपयोग मार्जिन से बेहतर होता है क्योंकि ब्लॉक के बाहर नहीं निकलता क्योंकि केनीटीएम ने अपने जवाब में लिखा था। – Nicolas

35
p { 
    text-indent: -1em; 
    padding-left: 1em; 
} 
+0

यह एक जादुई गोली के रूप में यह लग सकता है नहीं है, लेकिन अनिवार्य रूप से 'के रूप में' 'पाठ मांगपत्र में ही है: पिक्सल; पैडिंग-बाएं: - पीएक्स; '' ', इसलिए यह कई फ़ॉन्ट/फ़ॉन्ट-आकार संयोजनों के लिए काम नहीं करेगा। – certainlyakey

1

इनलाइन तत्वों पर शायद यह अलग-अलग काम करता है, मैंने देखा है। मुझे "पुरानी" की आवश्यकता थी (पैराग्राफ के बाकी हिस्सों की तुलना में पहली पंक्ति आगे छोड़ दी गई) और ऊपर दिए गए सुझावों के विपरीत - एक नियमित इंडेंट बनाया गया (जहां पहली पंक्ति अन्य लाइनों की तुलना में सही है)। यहां बताया गया है, एक इनलाइन तत्व के लिए काम करता है, उदाहरण के लिए एक "एक" टैग है:

#myDiv ul li { margin-left:1em; } 
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; } 

मैं भी युक्त ब्लॉक स्तर तत्व सेट 1em के अंतर के लिए इतना है कि जहां इनलाइन "एक" तत्वों शुरूआत करें, उनके नकारात्मक मार्जिन के साथ, वे वास्तव में सटीक स्थिति रखते हैं जहां मैं "बाहरी" बनाने के लिए चारों ओर गड़बड़ करने से पहले मूल रूप से चीजें होती।

उम्मीद है कि यह किसी की मदद करेगा! मैं भी अभी देखा कि मेरे इनलाइन तत्व, या तो पर पाठ-मांगपत्र पर ही कोई आकार नियंत्रण है ....

JSFiddle Example

1

उपयोग योग्य नहीं है, लेकिन अगर आप क्रोम पर Experimental Web platform Flag को सक्रिय आप text-indent:1em each-line; उपयोग कर सकते हैं जो होना चाहिए वही करो जो आप चाहते हैं।

text-indent on MDN

+0

भविष्य के लिए ऊपर की ओर बढ़ना जब यह बहुत सुविधाजनक सुविधा प्रमुख उम्मीदवारों द्वारा समर्थित (उम्मीद है) है। –

संबंधित मुद्दे