सवाल सीएसएस में टेक्स्ट और अंडरलाइनिंग के बीच अंतर को कैसे बढ़ाया जाए


सीएसएस का उपयोग करते समय, पाठ में text-decoration:underline लागू, क्या पाठ और अंडरलाइन के बीच की दूरी को बढ़ाना संभव है?


207
2017-11-14 15:48


मूल


यह वही नहीं है जो आप पूछ रहे थे, लेकिन यह विषय पर एक दिलचस्प पढ़ा गया था: सीएसएस डिजाइन: कस्टम अंडरलाइन - Peter Rowell
दूरी का इस्तेमाल फ़ॉन्ट द्वारा निर्धारित किया जाता है। वेब-सुरक्षित फोंट आज़माएं। - Alexei Danchenkov
इन दिनों CSS3 में बहुत सी नई टेक्स्ट-सजावट गुण हैं। कृपया alligator.io/css/text-decoration देखें उदाहरण: text-underline-position: under; तथा text-decoration-skip: ink; कृपया ध्यान दें कि यह शायद पुराने ब्राउज़र के साथ पिछड़ा संगत नहीं है। - maartenmachiels
एक और अच्छा समाधान - Zl3n


जवाब:


नहीं, लेकिन आप कुछ ऐसा कर सकते हैं border-bottom: 1px solid #000 तथा padding-bottom: 3px

यदि आप "अंडरलाइन" का एक ही रंग चाहते हैं (जो कि मेरे उदाहरण में एक सीमा है), तो आप केवल रंग घोषणा छोड़ दें, यानी। border-bottom-width: 1px तथा border-bottom-style: solid

मल्टीलाइन के लिए, आप तत्व के अंदर एक अवधि में आपको मल्टीलाइन ग्रंथों को लपेट सकते हैं। जैसे <a href="#"><span>insert multiline texts here</span></a> तो बस जोड़ें border-bottom तथा padding पर <span> - डेमो


260
2017-11-14 15:50



इस चाल के साथ मेरी एकमात्र समस्या यह है कि जब मैं div ऊंचाई के बराबर रेखा-ऊंचाई का उपयोग कर रहा हूं और फिर ऊर्ध्वाधर-संरेखण: मध्य; इसे केंद्रित करने के लिए, तो मैं इस चाल का उपयोग नहीं कर सकता क्योंकि तब अंडरलाइन div के नीचे समाप्त होती है। - deweydb
@deweydb: कैसे कंटेनर div में पैडिंग-तल जोड़ने के बारे में भी? jsfiddle.net/dYfjc/1 - chelmertz
बहु-लाइन लिंक के लिए काम नहीं करता है :( - Dmytro Shevchenko
मुझे यकीन नहीं है कि इस जवाब में इतने सारे अपवर्तक क्यों हैं। यह मल्टीलाइन ग्रंथों के साथ पूरी तरह से काम नहीं करता है।
मल्टीलाइन के लिए, आप तत्व के अंदर एक अवधि में आपको मल्टीलाइन ग्रंथों को लपेट सकते हैं। जैसे <a href="#"><span>insert multiline texts here</span></a> फिर बस सीमा-तल और पैडिंग जोड़ें <span>। jsfiddle.net/Aishaterr/vrpb2ey7/1 - Daniel Hernandez


उपयोग करने में समस्या border-bottom सीधे साथ भी है padding-bottom: 0, रेखांकन बहुत दूर है दूर अच्छे से देखने के लिए पाठ से। तो हमारे पास अभी भी पूर्ण नियंत्रण नहीं है।

एक समाधान जो आपको पिक्सेल सटीकता देता है, का उपयोग करना है :after छद्म तत्व:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

बदलकर bottom संपत्ति (ऋणात्मक संख्याएं ठीक हैं) आप अंडरलाइन को वही स्थान दे सकते हैं जहां आप इसे चाहते हैं।

सावधानी बरतने के लिए इस तकनीक के साथ एक समस्या यह है कि यह रेखा लपेटकर थोड़ा अजीब व्यवहार करता है।


82
2017-09-05 13:03



यह मेरे विशेष मुद्दे के लिए काम नहीं करेगा, लेकिन यह एक शानदार चाल है। +1
चारों ओर अच्छा काम है, लेकिन यह एंकरों के लिए काम नहीं करेगा जो कई लाइनों का विस्तार करते हैं - Willster
@ आखिरी बच्चा यह एक रेखांकन से बेहतर है, लेकिन टेक्स्ट रैप के साथ यह हर पंक्ति के लिए काम नहीं करेगा - Nishantha
एक समस्या यह है कि सीमा-तल और अंडरलाइनिंग दो अलग-अलग चीजें हैं। उदाहरण के लिए पाठ का हिस्सा अंडरलाइन के नीचे विस्तारित होना चाहिए। यदि आप ए-टैग को बटन के रूप में स्टाइल करते हैं, तो आपको सीमा-रेखा का उपयोग करने की स्वतंत्रता नहीं है। - Anders Lindén
किसी ऐसे व्यक्ति को बताएं जो वेब विकास के लिए नया है, एक ग्राफिक डिजाइनर, एक औसत उपयोगकर्ता, या आपकी माँ, कि टेक्स्ट और उसके नीचे की रेखा के बीच कुछ नियंत्रित स्थान जोड़ने की आवश्यकता है और वे आश्चर्यचकित होंगे कि आप अपने जीवन के साथ क्या कर रहे हैं । - MarcGuay


आप इसका इस्तेमाल कर सकते हैं text-underline-position: under

अधिक जानकारी के लिए यहां देखें: https://css-tricks.com/almanac/properties/t/text-underline-position/


40
2018-04-19 07:52



धन्यवाद! यदि आप एक धराशायी रेखांकन करने की कोशिश कर रहे हैं और देखते हैं कि यह पाठ और रेखा के नीचे के स्थान के बिना खींचा गया है, तो यह समस्या को हल करता है। - Jonathan Cross
बिना किसी कामकाज के आधुनिक ब्राउज़र के लिए यह सही जवाब है। - Paras Shah
यह फ़ायरफ़ॉक्स में काम नहीं करता है, यहां तक ​​कि विक्रेता-उपसर्ग के साथ भी नहीं - लेकिन यह डब्ल्यू 3 सी स्पेक में है: w3.org/TR/css-text-decor-3/#text-underline-position-property। अन्य प्रासंगिक संसाधन: quackit.com/css/css3/properties/css_text-underline-position.cfm - rosell.dk
महान खोज! मैं इसे इस रूप में देखता हूं कि जब तक अन्य ब्राउज़र स्पेक पर पकड़ नहीं लेते तब तक इसका उपयोग करना चाहिए। जिनके पास यह नहीं है, उनके लिए वे वांछित उपस्थिति से कम प्राप्त करेंगे, लेकिन बहुत बुरा नहीं है। - Volomike
यह असली जवाब है। का उपयोग करते हुए borders केवल एक पंक्तियों पर काम करेगा, आप multilines के साथ समस्या देखेंगे। - JohnnyQ


की दृश्य शैली के विवरण में हो रही है text-decoration:underline बहुत ज्यादा व्यर्थ है, इसलिए आपको हटाने के कुछ प्रकार के हैक के साथ जाना होगा text-decoration:underline और इसे किसी अन्य चीज़ के साथ बदल देता है जब तक कि सीएसएस के जादुई दूर-दूर के भविष्य के संस्करण हमें अधिक नियंत्रण न दें।

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

a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}
  • टेक्स्ट से लाइन कितनी दूर है, यह बदलने के लिए% मान (81% और 85%) समायोजित करें
  • लाइन मोटाई को बदलने के लिए दो% मानों के बीच अंतर समायोजित करें
  • अंडरलाइन रंग बदलने के लिए रंग मान (# 222222) समायोजित करें
  • एकाधिक लाइन इनलाइन तत्वों के साथ काम करता है
  • किसी भी पृष्ठभूमि के साथ काम करता है

कुछ पिछड़ा संगतता के लिए सभी मालिकाना गुणों के साथ एक संस्करण यहां दिया गया है:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

अद्यतन: SASSY संस्करण

मैंने इसके लिए एक एसएसएस मिश्रण बनाया है। यदि आप SASS का उपयोग नहीं करते हैं, तो ऊपर का नियमित संस्करण अभी भी बहुत अच्छा काम करता है ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

फिर इसे इस तरह उपयोग करें:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

अद्यतन 2: Descenders युक्ति

यदि आपके पास ठोस पृष्ठभूमि रंग है, तो पतला जोड़ने का प्रयास करें text-stroke या text-shadow अवरुद्ध करने वालों को बनाने के लिए आपकी पृष्ठभूमि के समान रंग में अच्छा लग रहा है।

श्रेय

यह मूल रूप से मिली तकनीक का सरलीकृत संस्करण है https://eager.io/app/smartunderline, लेकिन लेख को तब से हटा दिया गया है।


9
2017-08-21 16:48



दुर्भाग्य से eager.io लिंक अब और काम नहीं करता है। क्या आपको याद है कि अवरोधक अच्छे दिखने के लिए हैक क्या था? - Kano
@ कानो - मुझे विश्वास है कि यह ठोस पृष्ठभूमि के समान रंग में टेक्स्ट-छाया का उपयोग कर रहा था। - squarecandy
इसके अलावा, उपर्युक्त तकनीक के साथ आप टेक्स्ट से अंडरलाइन के रंग को अलग कर सकते हैं, इसलिए कभी-कभी मैं इसे पाठ से हल्का होने के लिए सेट करता हूं, जो पठनीयता के लिए किसी भी समस्या से कम लोगों के साथ टकराव करता है। - squarecandy


मुझे पता है कि यह एक पुराना सवाल है, लेकिन सिंगल लाइन टेक्स्ट सेटिंग के लिए display: inline-block और फिर सेटिंग height सीमा और पाठ के बीच की दूरी को नियंत्रित करने के लिए मेरे लिए अच्छा काम किया है।


5
2018-06-24 17:19



मुझे ऊंचाई निर्धारित करने की आवश्यकता नहीं थी। मैंने इसे एक और div में लपेट लिया और जैसा कि मैं चाहता था कि यह केंद्रित हो, मैं बस बाहर div पर पाठ-संरेखण सेट करता हूं। - Guy Lowe


@ आखिरी बच्चे का जवाब एक अच्छा जवाब है!

हालांकि, मेरे एच 2 में एक सीमा जोड़ने से पाठ की तुलना में एक रेखांकित किया गया।

यदि आप गतिशील रूप से अपने सीएसएस को लिख रहे हैं, या यदि मेरे जैसे आप भाग्यशाली हैं और जानते हैं कि पाठ क्या होगा, तो आप निम्न कार्य कर सकते हैं:

  1. बदलाव content कुछ सही लंबाई (यानी वही

  2. पाठ) फ़ॉन्ट रंग को सेट करें transparent (या rgba(0,0,0,0) )

रेखांकित करना <h2>Processing</h2> (उदाहरण के लिए), अंतिम बच्चे के कोड को बदलने के लिए:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

4
2018-04-16 21:08



एच 2 ब्लॉक तत्व हैं जो बता सकते हैं कि अंडरलाइन टेक्स्ट से अधिक क्यों थी। शायद display: inline-block इसे ठीक कर देगा। पाठ को प्रतिस्थापित करना content एक हैक की तरह दिखता है जो कई तरीकों से तोड़ सकता है। - last-child


देखो मेरा बेला

आपको सीमा चौड़ाई संपत्ति और पैडिंग संपत्ति का उपयोग करने की आवश्यकता होगी। मैंने इसे कूलर बनाने के लिए कुछ एनीमेशन जोड़ा:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>


3
2017-12-19 16:46





मल्टीलाइन ग्रंथों या लिंक के लिए एक विकल्प, आप अपने ग्रंथों को एक ब्लॉक तत्व के अंदर एक अवधि में लपेट सकते हैं।

<a href="#">
    <span>insert multiline texts here</span>
</a> 

तो आप बस सीमा-तल और पैडिंग जोड़ सकते हैं <span>

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

आप इस पहेली को देख सकते हैं। https://jsfiddle.net/Aishaterr/vrpb2ey7/2/


1
2017-11-09 10:41





अगर तुम चाहते हो:

  • बहु
  • छितराया हुआ
  • कस्टम नीचे पैडिंग के साथ
  • रैपर के बिना

रेखांकित, आप उपयोग कर सकते हैं 1 पिक्सेल ऊंचाई के साथ पृष्ठभूमि छवि repeat-x तथा 100% 100% पद:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

आप दूसरे को प्रतिस्थापित कर सकते हैं 100% कुछ और पसंद है px या em अंडरलाइन की ऊर्ध्वाधर स्थिति समायोजित करने के लिए। आप भी उपयोग कर सकते हैं calc यदि आप लंबवत पैडिंग जोड़ना चाहते हैं, उदा .:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

बेशक आप अपना खुद का बेस 64 पीएनजी पैटर्न अन्य रंग, ऊंचाई और डिज़ाइन के साथ भी बना सकते हैं, उदा। यहाँ: http://www.patternify.com/ - बस 2x1 पर वर्ग चौड़ाई और ऊंचाई सेट करें।

प्रेरणा स्रोत: http://alistapart.com/article/customunderlines


1
2018-06-03 19:49