सीएसएस के साथ एक पैराग्राफ की दूसरी पंक्ति से शुरू होने वाला इंडेंट

Question

मैं एक पैराग्राफ की दूसरी पंक्ति से शुरू करने के लिए कैसे इंडेंट कर सकता हूं?

मैंने कोशिश की

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

तथा

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

तथा

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

Comments

आपके सभी प्रथम पंक्ति पाठ इंडेंट 0 पर सेट क्यों हैं? इसके अलावा, मुझे नहीं पता कि यह कैसे करना है, लेकिन इस सूची से गायब एक वह है जो मुझे सबसे अधिक समझ में आता है, पैडिंग।

— स्कार्लिंस्की

Answer 1

यह सचमुच है सिर्फ दूसरी पंक्ति आप मांगपत्र करना चाहते हैं, या यह है से दूसरी पंक्ति (यानी। एक फांसी इंडेंट )?

यदि यह बाद की बात है, तो इस JSFiddle की तर्ज पर कुछ उपयुक्त होगा।

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

यह उदाहरण दिखाता है कि DIV या SPAN में समान CSS सिंटैक्स का उपयोग करने से विभिन्न प्रभाव कैसे उत्पन्न होते हैं।

Comments

@Reuben आपकी टिप्पणी के आधार पर, जिसे अब हटा दिया गया है, मैं मान लेता हूं कि आपने दूसरी पंक्ति से सामना किया था - और भविष्य के आगंतुकों के लिए, शायद यह फ़ील बेहतर है, जहाँ वाक्यविन्यास P नहीं div या span है। jsfiddle.net/gg9Hx

— Redditor

पैडिंग-लेफ्ट और फिर नेगेटिव टेक्स्ट-इंडेंट क्यों? ऐसा काम क्यों करना चाहिए? अजीब लगता है। सिर्फ एक सकारात्मक क्यों नहीं text-indent?

— डॉन चेदिले

पाठ-इंडेंट का स्पैन पर कोई प्रभाव नहीं पड़ता है। इसे उसी परिणाम के लिए स्पैन की स्टाइल से हटाया जा सकता है।

— सैम हिटलर

Answer 2

बायाँ-मार्जिन बनाएं: 2em या तो पहली पंक्ति सहित पूरे पाठ को दाईं ओर 2em तक धकेल देगा। पाठ-इंडेंट (पहली पंक्ति पर लागू) को -2em या तो के रूप में जोड़ें .. यह मार्जिन के बिना शुरू करने के लिए पहली पंक्ति वापस लाता है। मैंने इसे सूची टैग के लिए आज़माया

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

Answer 3

यह मेरे लिए काम किया:

p { margin-left: -2em; 
 text-indent: 2em 
 }

Comments

ऐसा लगता है कि ओपी ने जो पूछा उसका पूरा उलटा किया। @ तकनीक का संस्करण सही है। आपको आसपास माइनस को स्वैप करने की आवश्यकता है

— एलेक्स होलसेग्रोव

यह लगभग वही है जो मुझे चाहिए था। स्वीकृत जवाब मेरे लिए काम नहीं करेगा क्योंकि मुझे अपने सीएमएस में इस तरह से स्पैन जोड़ने की स्वतंत्रता नहीं है। एकमात्र समस्या जो मुझे यहां समाधान के साथ थी, वह यह है कि बचे हुए मार्जिन एक कंटेनर के बाहर पूरे पैराग्राफ को खींच लेंगे। इसलिए मैंने 'पोजिशन: रिलेटिव' और 'लेफ्ट: 2 एएम' को जोड़ा और यह परफेक्ट है। @AlexHolsgrove की टिप्पणी के विपरीत, Techillage का जवाब मेरे लिए बिल्कुल भी काम नहीं किया, लेकिन हो सकता है कि मैं एक सूची तत्व पर ऐसा नहीं कर रहा हूं।

— स्टु फर्लांग

Answer 4

मुझे एक पैरा में एक बड़े पहले शब्द के लिए अनुमति देने के लिए दो पंक्तियों को इंडेंट करने की आवश्यकता थी। एक बोझिल एक बंद समाधान एक एसवीजी तत्व में पाठ जगह है और यह एक <img> के रूप में ही स्थिति है। फ्लोट का उपयोग करना और एसवीजी की ऊंचाई का टैग परिभाषित करता है कि कितनी पंक्तियों को इंडेंट किया जाएगा उदा

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

• एसवीजी की ऊंचाई और चौड़ाई निर्धारित क्षेत्र अवरुद्ध है।
• Y = 36 एसवीजी टेक्स्ट बेसलाइन की गहराई और फ़ॉन्ट-आकार के समान है
• एसवीजी पाठ और पैरा पाठ के सर्वोत्तम संरेखण के लिए मार्जिन-टॉप की अनुमति
• यहां पहले दो शब्दों का इस्तेमाल किया गया है, जो कि अवरोहियों के लिए आवश्यक देखभाल की याद दिलाते हैं

हाँ यह बोझिल है लेकिन यह भी युक्त div की चौड़ाई से स्वतंत्र है।

उपर्युक्त उत्तर मेरी अपनी क्वेरी के लिए एक पैरा के पहले शब्द (ओं) को बड़ा और दो पंक्तियों में तैनात करने की अनुमति देने के लिए था। केवल एक पैरा की पहली दो पंक्तियों को दर्शाने के लिए आप सभी एसवीजी टैग्स को निम्नलिखित सिंगल पिक्सेल img से बदल सकते हैं:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

Answer 5

एक CSS3 काम कर रहा मसौदा है (उम्मीद है कि जल्द ही) आपको बस लिखने की अनुमति देगा:

p { text-indent: 200px hanging; }

नजर रखें: https://developer.mozilla.org/en-US/docs/Web/CSS/text-inentent

Answer 6

यदि आप सूची के रूप में शैली

आप "पाठ-संरेखित करें: प्रारंभिक" और बाद की पंक्तियाँ सभी को संकेत देंगे। मुझे एहसास है कि यह आपकी आवश्यकताओं के अनुरूप नहीं हो सकता है, लेकिन मैं यह देखने के लिए जाँच कर रहा था कि क्या मेरे मार्कअप को बदलने से पहले एक और समाधान था।

मुझे लगता है कि दूसरी लाइन डालने से भी काम चलेगा, लेकिन कंटेंट को ठीक से प्रवाहित करने के लिए मानव सोच की आवश्यकता होती है, और निश्चित रूप से, हार्ड लाइन टूट जाती है (जो मुझे परेशान नहीं करती है, प्रति)।

Comments

Stackoverflow में आपका स्वागत है। लगता है कि आपके पास इस इंडेंटेशन समस्या का कोई समाधान है। हालाँकि यह हर किसी के लिए बहुत मददगार होगा यदि आप कुछ मार्कअप प्रदान करते हैं और समाधान बताते हैं। हो सकता है कि आप वर्किंग डेमो बनाने के लिए jsfiddle.net या अन्य सेवा का उपयोग कर सकते हैं। शुभकामनाएं।

— ईजीएल 2-101