HTML टेक्स्ट के नीचे डॉटेड अंडरलाइन कैसे जोड़ें

95

आप HTML पाठ को कैसे रेखांकित करते हैं ताकि पाठ के नीचे की रेखा मानक रेखांकन के बजाय बिंदीदार हो? अधिमानतः, मैं एक अलग सीएसएस फ़ाइल का उपयोग किए बिना ऐसा करना चाहूंगा। मैं html में नौसिखिया हूँ।

html underline

— Parap
स्रोत

13

आप सीएसएस का उपयोग क्यों नहीं कर सकते हैं? शायद एक छवि के रूप में पृष्ठ बनाएं और mspaint के साथ लाइन जोड़ें?

— epascarello

मुझे नहीं लगता कि यह CSS

— Cfreak

आप सीएसएस का उपयोग करना होगा, लेकिन यह पृष्ठभूमि छवियों का उपयोग किया जा सकता है, सीमा नीचे सबसे अच्छा तरीका है

— kingdomcreation

4

दोस्तों। मुझे लगता है कि उन्होंने कहा "एक अलग सीएसएस फ़ाइल का उपयोग किए बिना", "सीएसएस के बिना" नहीं। नवदंपतियों की पूजा करें।

— स्टेफन रीच

137

यह सीएसएस के बिना असंभव है। वास्तव में, <u>टैग केवल text-decoration:underlineब्राउज़र के अंतर्निहित सीएसएस के साथ पाठ में जोड़ रहा है।

यहाँ आप क्या कर सकते हैं:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

— अल्फ्रेड जिंग
स्रोत

अपने <head>तत्व में, एक <style>टैग जोड़ें (मैंने अपना उत्तर संपादित किया है)

— अल्फ्रेड जिंग

2

तुम भी के dottedबजाय की कोशिश कर सकते हैंdashed

— ब्रायन बर्न्स

अच्छा समाधान और यह संभव है। मुझे इसके लिए कोड js नहीं बनाना चाहिए;)

— अहमत कैन ग्वेन

यहाँ बहु लाइन पाठ समर्थन stackoverflow.com/a/4365458/1078641 के

— इलेक्ट्रो

30

निम्नलिखित सीएसएस कोड का उपयोग करें ...

text-decoration:underline;
text-decoration-style: dotted;

— शकील अहमद
स्रोत

3

यह स्वीकृत उत्तर होना चाहिए। बॉक्स मॉडल के बाद, बिंदीदार का उपयोग करके borderबाहर रखा paddingजाएगा और इस प्रकार पाठ से दूर हो जाएगा।

— रयान वॉकर

2

एक छोटा वाक्यविन्यास है: text-decoration: underline #000 dotted;जहाँ पहली विशेषता रेखा है, दूसरी रंग है और तीसरी शैली है।

— एसओएस सर्गस्यान

सुधार के लिए धन्यवाद एसओएस

— शकील अहमद

15

सीएसएस के बिना, आप मूल रूप से एक छवि टैग का उपयोग करने के साथ फंस गए हैं। मूल रूप से पाठ की एक छवि बनाएं और अंडरलाइन जोड़ें। मूल रूप से इसका मतलब है कि आपका पृष्ठ स्क्रीन रीडर के लिए बेकार है।

CSS के साथ, यह सरल है।

HTML:

<u class="dotted">I like cheese</u>

सीएसएस:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

चल रहा उदाहरण

उदाहरण पृष्ठ

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>

— epascarello
स्रोत

9

एचटीएमएल 5 तत्व बिंदीदार रेखांकन दे सकता है इसलिए पाठ के नीचे नियमित रेखा के बजाय बिंदीदार रेखा होगी। और शीर्षक विशेषता उपयोगकर्ता के लिए टूल टिप बनाता है जब वे तत्व पर अपना कर्सर घुमाते हैं:

नोट: बिंदीदार सीमा / रेखांकित को फ़ायरफ़ॉक्स और ओपेरा में डिफ़ॉल्ट रूप से दिखाया गया है, लेकिन IE8, Safari और Chrome को CSS की एक पंक्ति की आवश्यकता है:

<abbr title="Hyper Text Markup Language">HTML</abbr>

— फातिमा वहीद
स्रोत

यह सही जवाब है। लघु और सीएसएस मुक्त। धन्यवाद।

— सईद अहदियन

4

यदि सामग्री में 1 से अधिक लाइन है, तो नीचे की सीमा को जोड़ने से मदद नहीं मिलेगी। उस स्थिति में आपको उपयोग करना होगा,

text-decoration: underline;
text-decoration-style: dotted;

यदि आप पाठ और रेखा के बीच में अधिक श्वसन स्थान चाहते हैं, तो बस उपयोग करें,

text-underline-position: under;

— दर्शना गुनवर्धन
स्रोत

3

@Epascarello द्वारा उत्तर को सुधार दिया गया :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

स्निपेट का विस्तार करें

— अनातोली टेकटोनिक
स्रोत

0

आप dottedविकल्प के साथ बॉर्डर बॉटम का उपयोग कर सकते हैं ।

border-bottom: 1px dotted #807f80;

— नील
स्रोत

0

आप इस विधि को आजमा सकते हैं:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

कृपया ध्यान दें कि आपके बिना text-underline-position: under;अभी भी एक बिंदीदार रेखांकन होगा, लेकिन यह संपत्ति इसे अधिक श्वास स्थान देगी।

यह मान रहा है कि आप इनलाइन स्टाइल का उपयोग करके HTML फ़ाइल के अंदर सब कुछ एम्बेड करना चाहते हैं और एक अलग सीएसएस फ़ाइल या टैग का उपयोग नहीं करना चाहते हैं।

— मोना जलाल
स्रोत

-2

यह सीएसएस के बिना असंभव नहीं है। सूची आइटम के रूप में उदाहरण के लिए:

<li style="border-bottom: 1px dashed"><!--content --></li>

— डाविंगटन III
स्रोत

6

यह सीएसएस के बिना असंभव है। styleविशेषता बस सीएसएस गुण एक तत्व के लिए सीधे आवेदन करने का एक तरीका है। शैली विशेषता पर MDN डॉक्स देखें ।

— मिरिखान सेप

इस तरह से CSS जोड़ना html स्टाइलिंग के बारे में प्रभावी ढंग से सोचने का एक तरीका है। बेशक, आप तर्क दे सकते हैं कि ऐसी कोई बात नहीं है लेकिन विधि का वर्णन करने के लिए एक आसान तरीका यह एक संभव समाधान है।

— दाविंगटन III 14

हालांकि यह अभी भी सीएसएस है, और दी गई वास्तविक प्राथमिकता एक अलग फ़ाइल नहीं थी। उस प्रतिबंध के साथ समस्या को हल करने के बारे में सबसे अच्छा तरीका है <style>। इनलाइन शैलियों का उपयोग बहुत संयम से किया जाना चाहिए।

— मरिचन

खैर उस समय मैंने उस पोस्ट को बनाया था क्योंकि मुझे इनलाइन शैलियों का उपयोग करना था। ऐसा प्रतीत होता है कि दूसरों को इस संभावना पर ध्यान नहीं दिया गया है कि वे शायद इसके बारे में नहीं सोचते थे, यह वास्तव में युद्ध और शांति के लिए एक उपयुक्त विषय नहीं है ... उन्होंने संभवतः वही पाया जो उन्हें चाहिए था और हमारे सुझाव उन और किसी अन्य के लिए हैं जो हो सकता है उन्हें जरूरत है, जब मैं काम से पोस्ट करता हूं तो मैं किसी को ध्यान में नहीं रखता हूं जो सुझाव के बारे में पहले से ही कुछ स्पष्ट कर रहा है जब यह एक सुझाव है कि "आपको इसे इस तरह से नहीं करना चाहिए" तो हाँ एक चिल पिल ब्रो लें :)

— डाविंग्टन III

1

तुम मेरे इरादों को भूल जाओ। मैं पूछे गए प्रश्न के लिए एक तकनीकी अवलोकन प्रासंगिक बना रहा था। मेरा आपको बाहर बुलाने का कोई इरादा नहीं था, और मैं इसके लिए माफी माँगता हूँ।

— मिरिखान