HTML <सुप /> टैग लाइन की ऊंचाई को प्रभावित करता है, इसे कैसे सुसंगत बनाया जाए?

Question

यदि मेरे पास एक <sup>बहु-पंक्ति <p>टैग में टैग है, तो उस पर सुपरस्क्रिप्ट वाली पंक्ति में अन्य लाइनों की तुलना में इसके ऊपर एक बड़ी रेखा है, भले ही मैं जिस लाइन-ऊंचाई पर रखता हूं, उसके बावजूद <p>।

स्पष्टीकरण के लिए संपादित करें : मेरा मतलब यह नहीं है कि मेरे पास बहुत से <p>एस हैं, जिनमें से प्रत्येक एक पंक्ति में है। मेरे पास <p>इसमें पर्याप्त सामग्री के साथ एक सिंगल है जो कई लाइनों पर लपेटने का कारण है। पाठ में कहीं (कहीं भी) एक <sup>या हो सकता है <sub>। यह ऊपर / नीचे अतिरिक्त रिक्ति जोड़कर उस रेखा के लिए लाइन की ऊंचाई को प्रभावित करता है। अगर मैं <p>इस पर एक बड़ी लाइन-ऊंचाई सेट करता हूं तो समस्या पर कोई फर्क नहीं पड़ता। लाइन की ऊंचाई बढ़ाई जाती है, लेकिन अतिरिक्त रिक्ति अभी भी बनी हुई है।

मैं इसे कैसे सुसंगत बना सकता हूँ - अर्थात सभी पंक्तियों में एक ही रिक्ति है कि उनमें कोई सम्‍मिलित है <sup>या नहीं?

आपका समाधान क्रॉस-ब्राउज़र (IE 6+, FF, सफारी, ओपेरा, क्रोम) होना चाहिए

Answer 1

लाइन-ऊँचाई इसे ठीक करती है, लेकिन आपको इसे बहुत बड़ा बनाना पड़ सकता है: मेरी सेटिंग पर मुझे लाइन-ऊँचाई को लगभग 1.8 तक बढ़ाना <sup>होगा, इससे पहले कि इसमें कोई हस्तक्षेप न हो, लेकिन यह फ़ॉन्ट से फ़ॉन्ट में भिन्न होगा।

सुसंगत पंक्ति ऊंचाइयों को प्राप्त करने के लिए एक संभव तरीका डिफ़ॉल्ट के बजाय अपनी स्वयं की सुपरस्क्रिप्ट स्टाइल सेट करना है vertical-align: super। यदि आप इसका उपयोग करते हैं तो topयह लाइन बॉक्स में कुछ भी नहीं जोड़ेगा, लेकिन आपको इसे फिट बनाने के लिए फ़ॉन्ट आकार को और कम करना पड़ सकता है:

sup { vertical-align: top; font-size: 0.6em; }

एक और हैक आप कोशिश कर सकते हैं कि लाइन बॉक्स को प्रभावित किए बिना इसे थोड़ा ऊपर ले जाने के लिए स्थिति का उपयोग करना है:

sup { vertical-align: top; position: relative; top: -0.5em; }

यदि आपके पास पर्याप्त लाइन-ऊंचाई नहीं है, तो बेशक यह ऊपर की लाइन में दुर्घटनाग्रस्त होने का जोखिम रखता है।

Comments

ऊर्ध्वाधर-संरेखित इसे तय किया, धन्यवाद। यहां तक ​​कि एक विशाल रेखा-ऊंचाई 300% + IE8, Chrome 3 या FF 3.5 में इसे ठीक नहीं करती है। मुझे अभी भी 1-2px का अंतर मिलता है।

— एंड्रयू बुलॉक

जैसा कि उल्लेख किया गया है कि यह हमेशा काम नहीं करता है यदि लाइन की ऊंचाई बहुत तंग है।

— रिक

@simPod: समान स्थिति, vertical-align: bottom(हालांकि यह आपको उतना नहीं मिलता है top) और फिर position:relative;एक सकारात्मक के साथ top।

— bobince

वास्तव में मैं {ऊर्ध्वाधर-संरेखित करना चाहता हूं: सुपर} क्योंकि यह IE8 में लाइन-ऊंचाई के साथ कुछ डिस्प्ले ग्लिच को रोकता है जहां तक ​​मुझे याद है। मेरी कोशिश होगी कि अगर बेहतर विकल्प हो तो अक्सर पोजिशनिंग का इस्तेमाल न करें। लापरवाह शीर्ष स्थिति परियोजना में बाद में कैस्केड की समस्याओं का कारण हो सकती है।

— सभी बिट्स

Answer 2

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

चाल को <sup>-की लाइन-ऊँचाई ०.४ पर सेट करना है। @ एससीओटी ने सामान्य उपयोग करने के लिए कहा, लेकिन यह हमेशा काम नहीं करता है।

इसका मतलब है कि आपको सुपरस्क्रिप्ट टेक्स्ट को समायोजित करने के लिए आसपास के टेक्स्ट की लाइन-ऊँचाई को बदलना नहीं है । मैंने IE7 + और अन्य प्रमुख ब्राउज़रों में इसका परीक्षण किया है।

Comments

+1। जैसा कि उल्लेख किया गया है, यह अन्य line-heightविशेषताओं के साथ संघर्ष को रोकता है । यह अभी भी पिछली पंक्ति के साथ चौराहों का कारण बन सकता है अगर समग्र line-heightरूप से छोटे पर सेट हो, तो।

— क्रिस क्रिचो

शानदार समाधान, क्रोमियम को गलत नहीं बनाता है! सबसे सरल जवाब अभी तक।

— अकटौ

बस एहसास हुआ कि यह आसपास के पाठ के गैर-डिफ़ॉल्ट लाइन-ऊंचाइयों को प्रभावित करेगा। line-height: 100%इस मामले में उपयोग करें ।

— बजे मथायस हाउर्ट

यह पूरी तरह से काम करता है। इसके अतिरिक्त, line-heightमेरे लिए संभावित मान 0, 1, 1em और 100% होना चाहिए। ये सभी निश्चित रूप से क्रोम और फ़ायरफ़ॉक्स में काम करते हैं।

— क्लार्कबाय

मैं अपने उपयोग के मामले के लिए भी इस उत्तर को पसंद करता हूं: यह उत्तर जीमेल में ईमेल पर काम करता है, स्वीकृत उत्तर नहीं देता है। stackoverflow.com/questions/21118072/…

— Mshnik

Answer 3

मेरे पास एक ही समस्या थी और दिए गए उत्तरों में से कोई भी काम नहीं किया। लेकिन मुझे एक फिक्स के साथ एक कमिट मिला जिसने मेरे लिए काम किया:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

इसे आसान रखें:

sup { vertical-align: text-top; }

[ फ़ॉन्ट-आकार आपके व्यक्तिगत प्रकार-चेहरे पर निर्भर करता है]

Answer 5

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Comments

कृपया अपने कोड के साथ स्पष्टीकरण प्रदान करें, इसलिए ओपी इससे सीख सकता है।

— EBH

Answer 6

मैं lengthऊर्ध्वाधर-संरेखित पर उपयोग करना पसंद करता हूं । यह तत्व की आधार रेखा को उसके माता-पिता की आधार रेखा से ऊपर लंबाई में संरेखित करता है।

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 7

<sup>टैग दो पंक्तियों के बीच अंतर को प्रभावित कर रहा है इसका कारण कई कारकों के साथ करना है। कारक हैं: लाइन की ऊंचाई, नियमित फ़ॉन्ट के संबंध में सुपरस्क्रिप्ट का आकार, सुपरस्क्रिप्ट की लाइन की ऊंचाई और अंतिम लेकिन कम से कम क्या सुपरस्क्रिप्ट के साथ संरेखित करने का तल नहीं है ... यदि आप सेट करते हैं ... लाइन की ऊँचाई नियमित पाठ "सुरंग बैंड" में होना (जिसे मैं इसे कहता हूं) 135% है तो नियमित पाठ (100%) 35% अधिक सफ़ेद हो जाता है। एक पैराग्राफ के लिए यह इस तरह दिखता है:

 p
    {
            line-height: 135%;
    }

यदि आप सुपरस्क्रिप्ट को सफ़ेद नहीं करते हैं ... (यानी इसकी लाइन ऊँचाई को 0 तक रखें) सुपरस्क्रिप्ट में केवल अपने पाठ की चौड़ाई है ... यदि आप सुपरस्क्रिप्ट को नियमित फ़ॉन्ट का प्रतिशत बनाने के लिए कहते हैं (के लिए) उदाहरण 70%) और आप इसे नियमित पाठ (पाठ-मध्य) के मध्य में संरेखित करते हैं, आप समस्या को समाप्त कर सकते हैं और एक सुपरस्क्रिप्ट प्राप्त कर सकते हैं जो सुपरस्क्रिप्ट की तरह दिखता है। यह रहा:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 8

मैं इस jsfiddle द्वारा उदाहरण के रूप में, यहाँ सुझाए गए समाधान को पसंद करता हूं :

सीएसएस:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

इस समाधान की सुंदरता यह है कि आप सुपरस्क्रिप्ट और सबस्क्रिप्ट की ऊर्ध्वाधर स्थिति को दर्जी कर सकते हैं, ऊपर या नीचे की रेखा के साथ किसी भी झड़प से बचने के लिए ... ऊपर, बस 0.2emअपनी आवश्यकताओं के अनुरूप वृद्धि या कमी करें ।

Answer 9

सभी पंक्तियों को लंबा करने के लिए , सुपरस्क्रिप्ट वाली रेखा के समान दिखने के line-heightलिए, पूरे पैराग्राफ के लिए एक बड़ा परिभाषित करें

<p style='line-height:150%'>

या जो भी मूल्य आपकी इच्छा को प्रभावित करता है।

यह अजीब लग सकता है, लेकिन यह है कि आपने अपनी आवश्यकताओं का वर्णन कैसे किया है।

EDIT: सभी लाइनों को एक समान बनाने के लिए जब केवल एक को दूसरों की तुलना में अधिक ऊर्ध्वाधर स्थान की आवश्यकता होती है , तो पैराग्राफ में सभी लाइनों को लंबा होना होगा।

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

EDIT2: संयोग से, मैंने एक छोटी सी html फाइल की कोशिश की है

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

और लाइनें FF3.0.14 और Konqueror में सभी समान ऊंचाई हैं (मैं अन्य ब्राउज़रों के लिए नहीं बोल सकता)

Comments

मैंने सवाल में कहा कि यह समस्या को हल नहीं करता है। Ive ने स्पष्ट किया कि आपको गलत समझा गया है

— एंड्रयू बुलॉक

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

— एंड्रयू बैल

हो सकता है कि ब्राउज़र के बीच कोई अंतर हो - आखिरकार, आपने जो उत्तर स्वीकार किया है, वह 'लाइन-हाइट इसे ठीक करता है' शुरू होता है, लेकिन हम नहीं जानते कि ब्राउज़र बॉबिन क्या उपयोग कर रहा था।

— पावियम

Answer 10

मैं लाइन-ऊंचाई का उपयोग कर रहा हूं: सुपरस्क्रिप्ट के लिए सामान्य, जो मेरे लिए सफारी, क्रोम, और फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन मुझे IE से यकीन नहीं है।

Answer 11

समाचार पत्र पर विशेष रूप से इस का उपयोग करें -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer 12

मुझे मिलिंगु किलु का समाधान पसंद है लेकिन उसी भावना में हूं जो मुझे पसंद है

sup { vertical-align:top; line-height:100%; }

Answer 13

& sup1, और sup2 आदि की चाल हो सकती है। यह सुपरस्क्रिप्ट के लिए एक HTML चाल है

Answer 14

यहाँ से उत्तर , दोनों प्रेत और ईमेल-एम्बेडेड HTML में काम करता है:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>