कई गैर-ब्रेकिंग स्पेस ("nbsp") के बजाय टैब स्पेस?


958

क्या  चार बार टाइप करने के बजाय HTML में टैब कैरेक्टर डालना संभव है ?


20
मुझे यह उपयोग करने के लिए उपयोगी लगता है <PRE> लाइन की शुरुआत में टैब म्युलप्ल टाइम का उपयोग करते समय (उदाहरण के लिए जब कोडिंग C कोडिंग करते हैं)
गाय कोवेल

एक TABचरित्र ... क्या करना है?
मिशेल डे रुएटर

आप अपने स्वयं के टैग को परिभाषित कर सकते हैं <tab>, फिर वांछित स्थान के बराबर संख्या के साथ उन्हें बदलने या पैड करने के लिए फ़ंक्शन पर jQuery का उपयोग करें ready
खालिद.के

यदि आपको वास्तव में टैब की आवश्यकता है, तो एक कोशिश करेंwhite-space
बुक्सि

6
FYI करें - यदि एक स्थिर 4x &nbsp;(या एक एकल &emsp;) इसे नहीं काट रहा है और आप चाहते हैं कि उन्हें अगले "4 स्थान" कॉलम तक पंक्तिबद्ध किया जाए, जैसा कि टैब कर सकता है, (जिसका अर्थ कभी-कभी इसका वास्तव में 0 या 1 या 2 या होगा) 3 स्थान को पंक्तिबद्ध करने के लिए) .. जैसे कि .. उदाहरण के लिए, कुछ पाठ संपादक .. दुर्भाग्य से, आप HTML में नहीं कर सकते हैं ... बिना <table>s ... और इसके अलावा, कुछ स्थानों का उपयोग करके इसे हैक करने का प्रयास करें। ... एक निश्चित फ़ॉन्ट की आवश्यकता होगी .... मुझे लगता है कि अधिकांश मुद्दे एक निश्चित फ़ॉन्ट की आवश्यकता के बीच झूठ बोलते हैं और यह कि HTML सफेद स्थान को हटाने के लिए प्यार करता है।
पिंप ट्राइज़किट

जवाबों:


582

यह सीएसएस का उपयोग करने के लिए बहुत क्लीनर है। कोशिश करें padding-left:5emया margin-left:5emइसके बजाय उपयुक्त।


13
सीएसएस के साथ @Alohci IMHO पैडिंग वह अच्छी नहीं है जब से आप ब्राउज़र में टेक्स्ट को ज़ूम करेंगे, टेक्स्ट साइज़ बढ़ जाएगा लेकिन पेडिंग AFAIK नहीं।
एलेक्स

16
@ एलेक्स वी - यदि आप emआयाम का उपयोग करते हैं, जैसा कि मैंने किया, तो इसका पाठ आकार के साथ विस्तार होना चाहिए। यहां तक ​​कि अगर आप नहीं करते हैं, तो यह उपयोग किए गए ज़ूम तंत्र की प्रकृति पर निर्भर करेगा।
अलोहसी

2
@DavidThielen - HTML 3, जिसमें TAB तत्व दिखाई दिया, वह ब्राउज़र निर्माताओं के साथ एक गैर-स्टार्टर था, और TAB तत्व कभी लागू नहीं किया गया था। इसके बजाय, HTML 3.2 बनाया गया था जो कुछ सरल था और इसके बजाय इसे लागू किया गया था।
अलोहसी

2
@ - वास्तव में। यानी जो आप वास्तव में चाहते हैं उन मामलों में टैब स्टॉप हैं । लेकिन वह नहीं था जो ओपी के बारे में पूछ रहा था। ओपी कई अनुक्रमिक गैर-ब्रेकिंग रिक्त स्थान के लिए प्रतिस्थापन के लिए कह रहा था, जो पंक्तियों को भी पंक्तिबद्ध नहीं करेगा। CSS में एक tab-sizeसंपत्ति है जो आप वास्तव में चाहते हैं, लेकिन इसका ब्राउज़र समर्थन अनिश्चित है। असफल होना, टेबल-लेआउट या शायद फ्लेक्सबॉक्स आपके सबसे अच्छे दांव हैं।
अलोहसी

5
इस सवाल का जवाब नहीं है। क्रिस्चियन द्वारा नीचे दिए गए उत्तर उपयोगकर्ता द्वारा पोस्ट किए गए मुद्दे को संबोधित करता है
प्रणव मारू

1264

यह निर्भर करता है कि आप किस चरित्र का उपयोग करना चाहते हैं।

कोई टैब इकाई ISO-8859-1 HTML में परिभाषित किया है - लेकिन वहाँ के अलावा अन्य खाली स्थान के पात्रों में से एक जोड़े हैं &nbsp;जैसे &thinsp;, &ensp;, और &emsp;

ASCII में, &#09;एक टैब है।

यहां HTML संस्थाओं की पूरी सूची और विकिपीडिया पर व्हॉट्सएप की एक उपयोगी चर्चा है


2
क्या अंतर के बीच है &ensp;और &emsp;? मैंने परीक्षण किया, उन दोनों का स्थान बिल्कुल एक जैसा है ..!
शफिज़ादेह

3
बनाने के लिए गुप्त सॉस & # 09; HTML में टैब किए गए स्थान के रूप में दिखाएं सफेद स्थान CSS परिभाषा है। <p style = "display: inline-block; व्हाइट-स्पेस: प्री-रैप;"> & # 09;! मुये बिएन! टैबिंग मेरे लिए स्पेनिश और अंग्रेजी </ p> में काम करता है। white-space: पूर्व; भी काम करता है। आप एक "टैब" टैग <टैब /> का उपयोग सीएसएस के साथ भी कर सकते हैं :: चयनकर्ता टैब से पहले :: {सामग्री: "000 0009";} से पहले, लेकिन यह हाइलाइट, कटिंग और पेस्ट करते समय टैब के रूप में नहीं दिखता है। ।
जूल्स बार्टो

3
W3 चश्मे से @ शफिज़ादेह : एक एन स्पेस आधे बिंदु के आकार का है और एक एम स्पेस वर्तमान फ़ॉन्ट के बिंदु आकार के बराबर है। &emsp;थोड़ा बड़ा है। मैं क्रोम 64 और फायरफॉक्स 58 में अंतर देख सकता हूं।
दिमित्री

क्रिस्टल रिपोर्ट में उपयोग के लिए MySQL में एक बड़े कॉनकट () क्वेरी का निर्माण करते समय इसकी तलाश थी। ASCII (& # 09;) ने पूरी तरह से काम किया!
माइक डी वेक्लेनि

यह वही है जिसे मैं देख रहा था। मैंने अंतिम पंक्ति को विशेषता का उपयोग करते हुए कुछ शीर्षक दिए हैं, लेकिन मैं नहीं चाहता कि उनमें से कुछ टूट जाएं। & गपशप; रोका गया।
एलेक्स बैनमैन

237

नहीं, टैब सिर्फ व्हाट्सएप है जहां तक ​​HTML का संबंध है। मैं एक एम-स्पेस की सिफारिश करूंगा जो कि यह बड़ा (→ | ←) है ... आम तौर पर 4 स्पेस चौड़ा होता है - और इनपुट के रूप में होता है &emsp;

यदि आप भाग्यशाली हैं, तो आप इसके लिए यूनिकोड वर्ण (" ") का उपयोग करने में भी सक्षम हो सकते हैं।


195

और emsp; जवाब है।

हालाँकि, वे उतने कार्यात्मक नहीं होंगे जितने कि आप उम्मीद कर सकते हैं कि यदि आप वर्ड-प्रोसेसर जैसे वर्ड, वर्डप्रैक्टिक, ओपन ऑफिस, वर्डवर्थ आदि में क्षैतिज सारणी का उपयोग करने के लिए उपयोग किए जाते हैं, तो वे निश्चित चौड़ाई हैं, और उन्हें अनुकूलित नहीं किया जा सकता है।

सीएसएस आपको बहुत अधिक नियंत्रण प्रदान करता है और तब तक एक विकल्प प्रदान करता है जब तक कि डब्ल्यू 3 सी एक आधिकारिक समाधान प्रदान नहीं करता है।

उदाहरण:

padding-left:4em 

..or ..

margin-left:4em 

..के रूप में उपयुक्त

यह निर्भर करता है कि आप किस चरित्र का उपयोग करना चाहते हैं।

आप कुछ टैब टैग सेट कर सकते हैं और उन्हें उसी तरह उपयोग कर सकते हैं जैसे आप एच टैग का उपयोग कैसे करेंगे।

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... और उनका इस तरह उपयोग करें:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

दृश्य उदाहरण देखने के लिए ऊपर स्निपेट चलाएँ।

अतिरिक्त चर्चा

ISO-8859-1 HTML में परिभाषित कोई क्षैतिज सारणीकरण संस्थाएं नहीं हैं, हालांकि सामान्य रूप से कुछ अन्य सफेद-अंतरिक्ष वर्ण उपलब्ध हैं &nbsp, उदाहरण के लिए; &thinsp;, &ensp;और उपर्युक्त है &emsp;

यह भी उल्लेखनीय है कि ASCII और यूनिकोड में, &#09;एक क्षैतिज सारणीयन है।


2
यह W3 सत्यापनकर्ता केXHTML अनुसार मान्य नहीं है
बुक्सि

यह केवल आधा सच है, चूंकि & emsp; सच मान्य W3C मार्क-अप है। लेकिन आप स्पष्ट रूप से अनुकूल सीएसएस उदाहरण का उल्लेख कर रहे हैं। इस मामले में, हम कस्टम टैग का उपयोग कर रहे हैं, जो नए मार्क-अप हैं और डब्ल्यू 3 सी सेट का हिस्सा नहीं हैं। W3C सत्यापनकर्ता हमेशा त्रुटि के रूप में कस्टम टैग को चिह्नित करने की डिग्री के लिए सख्त है। यह आपके ऊपर है जो अधिक महत्वपूर्ण है। यह समय है जब हमें Html मार्क-अप सेट में जोड़े गए टैब का एक अच्छा आधिकारिक निहितार्थ मिला है। उम्मीद है की यह मदद करेगा।
वंडरवर्कर

2
मैंने स्विंगिंग जेटबल हेडर के लिए एक स्ट्रिंग मूल्य और एक HTML तीर-प्रकार के चरित्र के लिए एक मामले में इसका उपयोग किया, जहां मुझे एक विभाजक के रूप में इस चरित्र की आवश्यकता थी। बहुत अच्छा काम करता है! धन्यवाद!
ब्लेक नील

2
"अजीब तरह से, html में कोई क्षैतिज टैब नहीं है" यह सब अजीब नहीं है क्योंकि फ़ॉर्मेटिंग लगातार html और सीएसएस से दूर जा रहा है, और एक टैब केवल एक तत्व तत्व नहीं है, लेकिन अच्छा जवाब और अच्छी तरह से समझाया गया है
माइकटी

75

नीचे खाली स्थान सम्मिलित करने के लिए HTML द्वारा प्रदान किए गए 3 अलग-अलग तरीके हैं

  1. &nbsp;एकल स्थान जोड़ने के लिए टाइप करें।
  2. &ensp;2 रिक्त स्थान जोड़ने के लिए टाइप करें।
  3. &emsp;4 रिक्त स्थान जोड़ने के लिए टाइप करें।

3
बस ;उन्हें भी जोड़ें । जैसे&nbsp;
Amio.io

2
यह उत्तर वास्तव में प्रश्न का उत्तर देता है। यह बेवकूफी है कि कैसे सीएसएस जवाब के रूप में चिह्नित किया जाता है।
मणि

@ मानी सवाल 2009 में पूछा गया था और स्वीकृत जवाब 2009 से है। यह जवाब 2018 में जोड़ा गया था। जब आप इसे इस तरह से देखते हैं, तो यह बेवकूफी नहीं है।

@ but भूल जाते हैं कि क्या यह वास्तव में सवाल का जवाब देता है या नहीं, लेकिन चिह्नित कोई सटीक उत्तर नहीं देता है वह बिंदु है जिसे मैं बनाने की कोशिश कर रहा हूं।
मणि

यह वास्तविक उचित उत्तर है। धन्यवाद!
एरियल मोनाको

67

प्रयत्न &emsp;

यह चार &nbsp;एस के बराबर है ।


वास्तव में w3.org/MarkUp/html3/specialchars.html के रूप में सही उत्तर नहीं है । स्पष्ट रूप से यह कहा जाता है कि यह किस प्रकार के फॉन्ट का उपयोग किया जा रहा है, यह भी है कि एम स्पेस भी मौजूदा फॉन्ट के पॉइंट साइज के बराबर है, और एम स्पेस दो स्पेस कैरेक्टर के बराबर है
le0diaz

52

किसी अनुच्छेद के अंदर (या बीच में) कई रिक्त स्थान डालने का कोई आसान तरीका नहीं है। सीएसएस का उपयोग करने का सुझाव देने वालों को आपकी बात याद आ रही है। आप हमेशा एक पक्ष से एक पैराग्राफ को इंडेंट करने की कोशिश नहीं कर सकते हैं, लेकिन वास्तव में, इसके एक विशेष स्थान में अतिरिक्त स्थान डालने की कोशिश कर रहे हैं।

संक्षेप में, इस मामले में, रिक्त स्थान सामग्री बन जाते हैं और शैली नहीं । मैं नहीं जानता कि इतने सारे लोग ऐसा क्यों नहीं देखते हैं। मैं उस कठोरता का अनुमान लगाता हूं जिसके साथ वे शैली और सामग्री नियम के पृथक्करण को लागू करने का प्रयास करते हैं (HTML शुरुआत से दोनों को करने के लिए डिज़ाइन किया गया था - एक अद्वितीय तत्व की कभी-कभी परिभाषित शैली के साथ कुछ भी गलत नहीं है, बिना कुछ और खर्च किए। सीएसएस स्टाइल शीट बनाने का समय और मॉडरेशन में उपयोग किए जाने पर इसके बारे में कुछ भी अप्राप्य नहीं है। जल्दी से कुछ करने में सक्षम होने के लिए कहा जाने वाला कुछ भी है।) अनुवाद करता है कि वे केवल व्हाट्सएप पात्रों को केवल उपयोग किए जाने पर विचार कर सकते हैं। शैली और इंडेंटेशन।

और जब बिना टैग &emsp;और &nbsp;टैग्स पर भरोसा किए बिना रिक्त स्थान सम्मिलित करने का कोई सुंदर तरीका नहीं है , तो मैं तर्क दूंगा कि परिणामी कोड कहीं अधिक अपठनीय हो जाता है अगर वहाँ एक उचित नाम टैग था जो आपको जल्दी से बड़ी संख्या में रिक्त स्थान डालने की अनुमति देता। (या यदि आप जानते हैं, तो रिक्त स्थान पहली जगह में बेकार नहीं थे)।

जैसा कि हालांकि, जैसा कि ऊपर कहा गया था, आपकी सबसे अच्छी शर्त &emsp;सही जगह पर डालने के लिए उपयोग करना होगा।


1
HTML को शुरू से ही स्टाइल से तैयार नहीं किया गया था।
मार्कस अनटवाडित्जर

इस बात पर अपनी बात से प्यार करें कि लोगों को किस तरह का इंडेंटेशन हमेशा नहीं चाहिए!
रेडवॉल्फ़ कार्यक्रम

46

पूर्व टैग का उपयोग करना बेहतर है । पूर्व टैग परिभाषित करता है पाठ preformatted।

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

इस लिंक पर प्री टैग के बारे में अधिक जानें


1
@ हुजैफासैफुद्दीन का क्या मतलब है? <pre>है एचटीएमएल 5 में मानकीकृत HTML4 में के रूप में ही व्यवहार के साथ।
सुमित

आई एम सॉरी आई डोंट नो यॉट आई वॉट दैट .. मैं सहमत हूं कि आप क्या कहते हैं। गलत जानकारी के लिए सॉरी
हुजैफा सैफुद्दीन

मैं आउटपुट को स्प्रैडशीट में पेस्ट करने के लिए फ़ॉर्मेट कर रहा था, और इसने मुझे टैबिंग करने के लिए \ t अक्षर सम्मिलित करने की अनुमति दी। निश्चित रूप से मेरा जवाब था। अच्छे जा रहे हो।
क्रेग ब्रेट

1
यह सबसे अच्छा विकल्प IMHO है। इसके अलावा, हम <pre> पर एक शैली परिभाषा लागू कर सकते हैं, इसलिए यदि आवश्यक हो, तो हमारे पास सही 'मोनोस्पेस' फ़ॉन्ट हो सकता है। उदाहरण: पूर्व {फ़ॉन्ट-परिवार: "ल्यूसिडा कंसोल", मोनाको, मोनोस्पेस; फ़ॉन्ट-आकार: 90%; }
reverpie

41

मैं एक विधि की खोज करते हुए इस पार आया और अपने स्वयं के लिए यह पता लगाना समाप्त कर लिया कि जो चाहता है उसके लिए आसानी से काम करता है। मैं यहां पोस्ट करने के लिए नया हूं इसलिए मुझे उम्मीद है कि यह काम करेगा ... लेकिन सीएसएस में यह है:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

फिर आपके HTML में मध्य वाक्य में आपका "लॉन्ग टैब" होना चाहिए जैसे मुझे चाहिए था:

<span class="tab"></span>

&nbsp;या &emsp;उस राशि से बचाता है जिसकी आपको आवश्यकता है।

आशा है कि यह किसी की मदद करता है, चीयर्स!


3
यह बाईं ओर 80px और spanटैग के दाईं ओर 80px जोड़ देगा , बिल्कुल टैब नहीं।
mcont

फिर भी एक चतुर प्रतिक्रिया के रूप में आप केवल स्टाइल के लिए सीएसएस की अनुमति देते समय मार्कअप का एक छोटा सा जोड़ रहे हैं।
'23:

19

&emsp;, &ensp;, &#8195;या&#8194; इस्तेमाल किया जा सकता।

W3 का कहना है ...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font. 

HTML3 के लिए W3.org पर और पढ़ें

HTML4 के लिए W3.org पर अधिक पढ़ें

विकिपीडिया पर और भी अधिक


16

AFAIK, एकमात्र तरीका उपयोग करना है

&nbsp;

यदि आप CSS का उपयोग कर सकते हैं तो आप गद्दी या मार्जिन का उपयोग कर सकते हैं। बॉक्स मॉडल देखें , और इंटरनेट एक्सप्लोरर के लिए, इंटरनेट एक्सप्लोरर बॉक्स मॉडल बग भी पढ़ें ।


9

यदि व्हाट्सएप महत्वपूर्ण हो जाता है , तो बेहतर होगा कि आप पहले से लिखे टेक्स्ट और <प्री> टैग का उपयोग करें।


व्हाट्सएप के बारे में ओपी इतना खास नहीं है, सिर्फ कई के शॉर्टकट के बारे में पूछा गया है &nbsp;<pre>टैग लगाने से बहुत सारे अतिरिक्त काम बनेंगे ।
isomorphismes

मोनोपेस फॉन्ट से बचने के लिए, css "व्हाइट-स्पेस: प्री-रैप" का उपयोग करें
hultqvist

व्हॉट्सएप कोई that importantचीज नहीं है। यह जीवन का एक तथ्य है।
रेडवॉल्फ कार्यक्रम

9

यदि आप किसी पैराग्राफ में पहले वाक्य को सिर्फ इंडेंट करना चाहते हैं, तो आप एक छोटी सी सीएसएस ट्रिक के साथ ऐसा कर सकते हैं:

p:first-letter {
    margin-left: 5em;
}

हाँ। वह भी काम करेगा। बस यह याद रखना चाहिए कि :first-letterयदि बिंदु केवल पहले वाक्य को इंडेंट करना है।
Peirix

9

HTML3 में पेश किए जाने के बावजूद <टैब> टैग ने इसे कभी भी ब्राउज़र में नहीं बनाया। मैंने हमेशा सोचा है कि यह एक वास्तविक दया है क्योंकि अगर हम हमारे पास उपलब्ध होते तो जीवन कई परिस्थितियों में बहुत आसान होता। लेकिन आप इसे आसानी से एक नकली <टैब> टैग देने के लिए उपाय कर सकते हैं। अपने HTML के सिर में निम्नलिखित (या शैली टैग के बिना) अपने सीएसएस में जोड़ें:

<style>
    tab { padding-left: 4em; }
</style>

उसके बाद से, जब आपको अपने दस्तावेज़ में एक टैब की आवश्यकता होती है, तो उसमें <टैब> डालें। यह एक सच्चा टैब नहीं है, क्योंकि यह टैब-मार्क्स के साथ संरेखित नहीं होता है, लेकिन यह ज्यादातर जरूरतों के लिए काम करता है, बिना भद्दे चरित्र वाली संस्थाओं या स्पैन के साथ। यह आपके स्रोत की जांच करना आसान बनाता है, और सरल चीजों को प्रारूपित करने के लिए एक चिंच जहां आप तालिकाओं या अन्य अधिक जटिल "समाधान" की परेशानी में नहीं जाना चाहते हैं।

इस समाधान का एक अच्छा पहलू यह है कि आप <टैब> टैग के साथ सभी टेब को बदलने के लिए एक टेक्स्ट दस्तावेज़ की त्वरित खोज / प्रतिस्थापन कर सकते हैं।

आप वास्तविक पूर्ण स्थिति TABs के एक समूह को परिभाषित करने में सक्षम हो सकते हैं, फिर उपयुक्त टैब का उपयोग करें (जैसे <tab2> या <tab5> या जो भी आवश्यक हो), लेकिन मुझे ऐसा करने का कोई तरीका नहीं मिला है कि इसके बिना बाद की पंक्तियों को इंडेंट करना। ।


7

आप एक तालिका का उपयोग कर सकते हैं और widthपहले के लिए एक विशेषता लागू कर सकते हैं <td>

कोड:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

परिणाम

Content1       Content2
Content3       Content4

धन्यवाद!! यह उन परिस्थितियों के लिए सबसे अच्छा और सबसे सामान्य समाधान है जहां सीएसएस संभव नहीं है।
जॉन हेन्केल

6

मैंने लाइन स्टाइल के साथ एक स्पैन का उपयोग किया है। मुझे ऐसा करना पड़ा है क्योंकि मैं सादे पाठ की एक स्ट्रिंग को संसाधित करने के रूप में कर रहा हूं और \ t को 4 स्थानों (appx) के साथ बदलने की आवश्यकता है। मैं उपयोग नहीं कर सका&nbsp; आगे की प्रक्रिया में उनका क्योंकि उनकी व्याख्या की जा रही थी ताकि अंतिम चिह्न में गैर-सामग्री रिक्त स्थान हो।

HTML:

<span style="padding: 0 40px">&nbsp;</span>

मैंने इसे इस तरह से php फंक्शन में इस्तेमाल किया:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

6

यदि आपको केवल एक टैब की आवश्यकता है, तो निम्नलिखित ने मेरे लिए काम किया।

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

HTML के साथ कुछ इस तरह:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p> 

आप अतिरिक्त "टैब" शैलियों को जोड़कर और "HTML" बदल सकते हैं जैसे कि HTML:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

HTML के साथ कुछ इस तरह:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

4

यदि आप CSS का उपयोग कर रहे हैं, तो मैं निम्नलिखित सुझाव दूंगा:

p:first-letter { text-indent:1em; }

यह पारंपरिक प्रकाशनों की तरह पहली पंक्ति का संकेत देगा।


4

इसके लिए एक सरल सीएसएस है:

white-space: pre;

यह उन रिक्त स्थानों को रखता है जिन्हें आप HTML में एकीकृत करने के बजाय जोड़ते हैं।


3
<span style="margin-left:64px"></span>  

इसे इस तरह समझें: एक टैब 64 पिक्सल के बराबर है। तो यह वह स्थान है जिसे हम CSS द्वारा दे सकते हैं।


3

हम शैली का उपयोग कर सकते हैं = "सफेद-स्थान: पूर्व" इस तरह:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

रिक्त स्थान अंदर टैब से भर जाता है, टैब की मात्रा पाठ पर निर्भर करती है।

यह इस तरह दिखेगा:

Text    : value
Text2   : value2
Text32  : value32

3

आदर्श सीएसएस कोड जिसका उपयोग किया जाना चाहिए, "प्रदर्शन" और "न्यूनतम-चौड़ाई" गुणों का एक संयोजन होना चाहिए ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

2

ठीक है, अगर किसी को केवल एक पंक्ति की शुरुआत में पूरे अनुच्छेद से बाहर एक लंबे व्हाट्सएप की जरूरत है, तो यह एक समाधान हो सकता है:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

यदि वह लिखना बहुत अधिक है या किसी को कई स्थानों पर ऐसे टैब की आवश्यकता है, तो आप ऐसा कर सकते हैं

<span class='tab'>&nbsp;</span>

फिर इसे CSS में शामिल करें:

span.tab {display:inline-block;height:1em;width:4em;}

2

मैं "टैब्ड" उपस्थिति देने के लिए बिना बुलेट वाली सूची का उपयोग करता हूं। (यह एमएस वर्ड का उपयोग करते समय मैं कभी-कभी करता हूं)

CSS फ़ाइल में:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

और HTML फ़ाइल में अनियंत्रित सूचियों का उपयोग करें:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

इस समाधान की सुंदरता यह है कि आप नेस्टेड सूचियों का उपयोग करके अधिक इंडेंटेशन बना सकते हैं।

यहाँ एक noob बात कर रहा है, इसलिए यदि कोई त्रुटि है, तो कृपया टिप्पणी करें।


(x) HTML को दस्तावेज़ की सामग्री को निर्दिष्ट करना चाहिए कि यह कैसे प्रदर्शित होता है जिसे CSS द्वारा नियंत्रित किया जाना चाहिए। ऐसे कारण हैं कि तालिकाओं का उपयोग करके वेबपृष्ठों को रखना गैर-सारणीबद्ध डेटा के लिए कभी भी उपयोग नहीं किया जाना चाहिए।
नील्सव

1

हम कस्टम स्पेस स्पैन क्लास का उपयोग करते हैं

<span class='space'></span>

CSS में space class शामिल करें।

.space 
{
   margin-left:45px;
}

1
जैसा कि Alohci के उत्तर में है, कृपया ब्राउज़र टेक्स्ट जूम के लिए अनुमति दें em/ मापें rem
चार्ली हार्डिंग

0

सीएसएस और सर्वोत्तम अभ्यास का उपयोग करते हुए, नेस्टेड, इंडेंटेड मेनू की गतिशील रचना इस प्रकार होगी:

  1. प्रत्येक घोंसले के शिकार के लिए एक शैली बनाएं, जैसे इंडेंट 1, इंडेंट 2 आदि, प्रत्येक अपने स्वयं के बाएं मार्जिन को निर्दिष्ट करने के साथ। साइट संरचना को शायद ही कभी घोंसले के तीन स्तरों से परे जाना चाहिए।
  2. पुनरावर्तन को ट्रैक करने के लिए स्व-पुनरावर्ती फ़ंक्शन के भीतर एक स्थिर चर (पूर्णांक) का उपयोग करें।
  3. प्रत्येक लूप के लिए, indentसर्वर या स्क्रिप्टिंग जैसे PHP या ASP का उपयोग करते हुए, लूप नंबर को शब्द में जोड़ें , ताकि सीएसएस द्वारा इन मेनू को उचित रूप से स्वरूपित किया जा सके।

वैकल्पिक रूप से, स्थैतिक चर के माध्यम से लूप एकाधिक &nbsp;या का उपयोग करके रिक्ति जोड़ने के लिए<pre> टैग या अन्य वर्णों , जैसा कि उपयुक्त हो।

क्षैतिज टैब वर्ण का परीक्षण करने से, &#09;मैंने पाया कि यह &nbsp;मेरे द्वारा वर्णित परिदृश्य में कई के प्रतिस्थापन के रूप में काम नहीं करता है। आपके अलग-अलग परिणाम हो सकते हैं।


0

यह एक बदसूरत समाधान का एक सा है लेकिन आप बस ऐसा कर सकते हैं

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

और फिर अपने तारों में टैब चर का उपयोग करें।


0

केवल "पूर्व" टैग:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

आप इस टैग पर कोई भी CSS क्लास लगा सकते हैं।


0

मैं बस सिफारिश करेंगे:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

0
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

सुनिश्चित करें कि रंग कोड पृष्ठभूमि से मेल खाता है जो px टैब के लिए वांछित लंबाई में परिवर्तनशील है।

फिर <t> </ t> के बाद अपना पाठ जोड़ें

अवधि का उपयोग अंतरिक्ष धारक के रूप में किया जाता है और इसे टाइप करना आसान है, लेकिन '& # 160;' पीरियड के स्थान पर भी इसका इस्तेमाल किया जा सकता है, ताकि कलर कोडिंग इर्रिटेबल हो।

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

यह ज्यादातर पाठ के पैराग्राफ प्रदर्शित करने के लिए उपयोगी है, हालांकि स्क्रिप्ट के अन्य भागों में उपयोगी हो सकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.