उद्धरण के लिए सीएसएस

मैं ई-पुस्तकों में उद्धरण स्वरूपण को बेहतर बनाने के लिए एक समाधान की तलाश में हूं। ई-पुस्तकों में मैं कोटेशन का उपयोग करता हूं, उनमें से प्रत्येक में एक सामग्री और स्रोत होता है।उद्धरण के लिए सीएसएस

मैं चाहते हैं:

.quotation { 
    display: block; 
    text-align: justify; 
    margin: 0.25em 1em 0.25em 1.25em; 
} 
.quottext { 
    font-style: italic; 
} 
.quotsource { 
    margin: 0 0 0 0.25em; 
}

परिणाम इस तरह दिखता है:

.quotation { 
 
    display: block; 
 
    text-align: justify; 
 
    margin: 0.25em 1em 0.25em 1.25em; 
 
} 
 
.quottext { 
 
    font-style: italic; 
 
} 
 
.quotsource { 
 
    margin: 0 0 0 0.25em; 
 
}

<p class="quotation"> 
 
    <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu.</span> 
 
    <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> 
 
</p>

मैं सीएसएस का उपयोग अभी: यहाँ एचटीएमएल & सीएसएस हैउद्धरण स्रोत के भीतर लाइन ब्रेक को प्रतिबंधित करें, या तो सामग्री के ठीक पीछे (यदि स्रोत टेक्स्ट छोटा है) का पालन करें, या लाइन ब्रेक बनाएं और उद्धरण स्रोत को नई लाइन पर रखें (यदि स्रोत टेक्स्ट लंबा है)।

जब मैं का उपयोग करें: उद्धरण स्रोत के लिए

white-space: nowrap;

विशेषता, स्रोत अगली पंक्ति में रखा गया है, लेकिन लाइन से पहले भी विरल है:

ऐसे मामले में मैं इसे प्राप्त करना चाहता हूं:

मैं सभी उद्धरणों के लिए एक ही HTML और CSS का उपयोग करना चाहता हूं क्योंकि मुझे ई-रीडर डिवाइस के प्रदर्शन का आकार कभी नहीं पता है। क्या आप कृपया सलाह दे सकते हैं कि HTML और CSS के साथ कोई समाधान है या नहीं?

स्रोत

2016-12-30 KarelHusa

बस 'हटाने text-align: का औचित्य साबित;' सीएसएस –

जब मैं हटाया text-align: का औचित्य साबित; उद्धरण सामग्री अच्छी तरह से नहीं दिखती है। उद्धरण सामग्री को गठबंधन करने की आवश्यकता है। – KarelHusa

मुझे नहीं लगता कि केवल शुद्ध सीएसएस के साथ आप जो चाहते हैं उसे प्राप्त करने का एक तरीका है।शायद सबसे अच्छा समाधान हमेशा लम्बाई (उपयोग डिस्प्ले: ब्लॉक) –

क्या .quotsource

स्रोत के लिए float: right; के बारे में सही करने के लिए गठबंधन किया जाएगा, लेकिन अंतरिक्ष उपयोग किया जाता है।

.quotation { 
 
    display: block; 
 
    text-align: justify; 
 
    margin: 0.25em 1em 0.25em 1.25em; 
 
} 
 
.quottext { 
 
    font-style: italic; 
 
} 
 
.quotsource { 
 
    float: right; 
 
    margin: 0 0 0 0.25em; 
 
}

<p class="quotation" style="width: 500px"> 
 
    <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy. 
 
    </span> 
 
    <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> 
 
</p> 
 
<br> <br> 
 
<p class="quotation" style="width: 300px"> 
 
    <span class="quottext">Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století3 
 
    </span> 
 
    <span class="quotsource">(The Lorem Ipsum Manual, page 6)</span> 
 
</p>

स्रोत

2016-12-30 13:10:30

धन्यवाद, मुझे आपका विचार पसंद है। यह अंतरिक्ष का उपयोग करता है और अच्छी तरह से दिखता है। आपके योगदान के लिए सभी अन्य धन्यवाद, मैं इसकी सराहना करता हूं। – KarelHusa

एकमात्र मुद्दा जो मैं देख सकता था वह यह है कि उद्धरण स्रोत निम्नलिखित अनुच्छेद में तैरता है। उद्धरण के स्रोत को शुरू करने के लिए मुझे निम्नलिखित अनुच्छेद की आवश्यकता थी, इसलिए मैंने स्पष्ट किया: दाएं; अगली अनुच्छेद शैली के लिए। – KarelHusa

मैंकरने में सक्षम हूँ पाठ का औचित्य साबित, जबकि पिछले लाइन रखने सभ्य लग रही।

मैं स्थान पर अनुमति देने पर अनुच्छेद की अंतिम पंक्ति पर स्रोत/संदर्भ प्राप्त करने के लिए सक्षम नहीं हूं।

यह मेरे पास अब तक है।

.container p { 
 
    width: 1200px; 
 
    max-width: 90%; 
 
    margin: .75em auto; 
 
    text-align: justify; 
 
} 
 
.source { 
 
    color: red; 
 
    display: block; 
 
}

<div class="container"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, minimum rationibus honestatis vix et, vix habeo prodesset et. No eos quod clita splendide, viris deterruisset et quo. Nihil omittam invenire sit id, an novum minimum sit. Ius an zril verear impedit. Etiam commune molestie ei 
 
    pri. 
 
    <span class="source">(The Lorem Ipsum Manual, page 6)</span> 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, in vis inani torquatos, argumentum intellegam id duo, est id sale decore. Quo clita quaestio an. Partem lobortis ullamcorper nam an, eu has dolor iriure omittam. Mea nostrum democritum at. Munere perfecto liberavisse at pri. 
 
    Cibo dicta his ei, pro ne probo dolores.<span class="source">(The Lorem Ipsum Manual, page 803)</span> 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, usu congue scaevola conceptam id. Mea an nostrud ornatus impedit, ut possim corpora eos, indoctum hendrerit usu no. At quaeque sadipscing quo, natum prima definiebas in mei, nec audire ornatus et. Alii tritani ex vim, magna 
 
    dolores philosophia in mea. Est admodum instructior cu. Tantas alienum maiestatis ex est.<span class="source">(The Lorem Ipsum Manual, page 532)</span> 
 
    </p> 
 
</div>

स्रोत

2016-12-30 12:51:17

लेकिन मुझे नहीं लगता कि यह मूल समस्या हल करता है, कि जब स्रोत अगली पंक्ति में स्थानांतरित हो जाता है, तो ऊपर की रेखा (पाठ की अंतिम पंक्ति) उचित है, जो वह नहीं चाहता है। –

@torazaburo मैं पूरी तरह से सहमत हूं, यह अभी भी एक प्रमुख मुद्दा है। मैं यह समझने की कोशिश कर रहा हूं कि अब यह कैसे करें। –

उद्धरण के लिए सीएसएस

उत्तर

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