CSS এ টেক্সট এবং আন্ডারলাইনের মধ্যে ফাঁক কীভাবে বাড়ানো যায়

Question

সিএসএস ব্যবহার করে, যখন পাঠ্য text-decoration:underlineপ্রয়োগ করা হয়, তখন কি পাঠ্য এবং আন্ডারলাইনটির মধ্যে দূরত্ব বাড়ানো সম্ভব?

Comments

এটি আপনি যা চেয়েছিলেন ঠিক তা নয়, তবে এটি এই বিষয়টিতে একটি আকর্ষণীয় পঠন ছিল: সিএসএস ডিজাইন: কাস্টম আন্ডারলাইনগুলি

— পিটার রোয়েল

দূরত্ব ব্যবহৃত ফন্ট দ্বারা নির্ধারিত হয়। ওয়েব-নিরাপদ হরফ চেষ্টা করুন।

— আলেক্সি ডানচেনকভ

সিএসএস 3 এর আজকাল প্রচুর নতুন পাঠ্য-সজ্জা বৈশিষ্ট্য রয়েছে। দয়া করে alligator.io/css/text- বিবরণ উদাহরণ দেখুন: text-underline-position: under;এবং text-decoration-skip: ink;দয়া করে নোট করুন যে এটি সম্ভবত পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ নয়।

— chocolata

আরেকটি ভাল সমাধান

— w3spi

text-underline-offsetএখানে ভোট দিন : bugs.chromium.org/p/chromium/issues/…

— মার্ক ফিশার

Answer 1

না, কিন্তু তোমার মত কিছু দিয়ে যেতে পারে 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>- ডেমো

Comments

এই কৌশলটির সাথে আমার একমাত্র সমস্যা হ'ল আমি যখন ডিভ উচ্চতার সমান লাইন-উচ্চতা ব্যবহার করি এবং তারপরে উল্লম্ব-সারিবদ্ধ: মাঝখানে; এটি কেন্দ্রিক পেতে, তারপরে আমি এই কৌশলটি ব্যবহার করতে পারি না কারণ তারপরে আন্ডারলাইনটি ডিভের নীচে শেষ হয়।

— deweydb

@ দেউইডিবি: কনটেইনার ডিভের সাথে প্যাডিং-ডাউনটি কীভাবে যুক্ত করবেন? jsfiddle.net/dYfjc/1

— chelmertz

+1 আমি ফন্টের রঙের উত্তরাধিকার হিসাবে রঙের সম্পত্তি ত্যাগ করার বিষয়ে জানতাম না - যা ভবিষ্যতে অনেক ঘাম এবং অশ্রু বাঁচাবে!

— ল্যারি

আমি কেন নিশ্চিত উত্তর পাচ্ছি না যে এই উত্তরের এতগুলি উত্সাহ রয়েছে। এটি মাল্টলাইন পাঠ্যের সাথে পুরোপুরি কাজ করে না।

মাল্টলাইনের জন্য, আপনি উপাদানটির অভ্যন্তরে বহু স্পষ্টে মাল্টলাইন পাঠ্যগুলিকে মোড়ানো করতে পারেন। যেমন <a href="#"><span>insert multiline texts here</span></a>তারপরে কেবল সীমানা-নীচে এবং প্যাডিং যুক্ত করুন <span>। jsfiddle.net/Aishaterr/vrpb2ey7/1

— ড্যানিয়েল হার্নান্দেজ

Answer 2

আপডেট 2019: সিএসএস ওয়ার্কিং গ্রুপ পাঠ্য সজ্জা স্তর 4 এর জন্য একটি খসড়া প্রকাশ করেছে যা একটি আন্ডারলাইনের সঠিক অবস্থান নির্ধারণের জন্য নিয়ন্ত্রণের জন্য একটি নতুন সম্পত্তি যুক্ত করবে text-underline-offset(পাশাপাশি text-decoration-thickness)। এই লেখার হিসাবে এটি প্রাথমিক পর্যায়ে খসড়া এবং কোনও ব্রাউজার দ্বারা প্রয়োগ করা হয়নি, তবে দেখে মনে হচ্ছে এটি অবশেষে অপ্রচলিত নীচের কৌশলটি তৈরি করবে।

নীচে মূল উত্তর।

---

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সম্পত্তি পরিবর্তন করে (নেতিবাচক সংখ্যাগুলি ভাল) আপনি যেখানে চান সেখানে আন্ডারলাইনটি ঠিক ঠিক অবস্থান করতে পারেন।

সচেতন হওয়ার এই কৌশলটির একটি সমস্যা হ'ল এটি লাইন মোড়কের সাথে কিছুটা অদ্ভুত আচরণ করে।

Comments

এটি আমার নির্দিষ্ট ইস্যুটির জন্য কাজ করবে না, তবে এটি দুর্দান্ত কৌশল। +1

চারপাশে ভাল কাজ, তবে এটি একাধিক লাইনের বিস্তৃত অ্যাঙ্করগুলির জন্য কাজ করবে না

— উইলস্টার

@ শেষ সন্তানের এটি আন্ডারলাইন করার চেয়ে ভাল তবে পাঠ্য মোড়ানো দিয়ে এটি প্রতিটি লাইনের জন্য কাজ করবে না

— নিশান্ত

একটি সমস্যা হ'ল সীমানা-নীচে এবং আন্ডারলাইন করা দুটি আলাদা জিনিস। উদাহরণস্বরূপ পাঠ্যের অংশটি নিম্নরেখার নীচে প্রসারিত হওয়া উচিত। আপনি যদি কোনও ট্যাগগুলিকে বোতাম হিসাবে স্টাইল করেন তবে আপনার সীমানা-নীচে আন্ডারলাইন হিসাবে ব্যবহার করার স্বাধীনতা নেই।

— Anders Lind Ln

যে কেউ ওয়েব ডেভলপমেন্টে নতুন, একজন গ্রাফিক ডিজাইনার, একজন গড় ব্যবহারকারী বা আপনার মাকে বলছেন তা ভাবুন যে পাঠ্যের মধ্যে কিছুটা নিয়ন্ত্রিত স্থান যুক্ত করা দরকার এবং এটি আন্ডারলাইন করে এবং তারা আপনার জীবন নিয়ে কী করছে তা অবাক করে দেবে ।

— মারকগুয়ে

Answer 3

আপনি এটি ব্যবহার করতে পারেন text-underline-position: under

আরও বিশদের জন্য এখানে দেখুন: https://css-tricks.com/almanac/properties/t/text-undline-position/

আরও দেখুন ব্রাউজার উপযুক্ততা ।

Comments

ধন্যবাদ! আপনি যদি কোনও ড্যাশযুক্ত আন্ডারলাইন করার চেষ্টা করছেন এবং দেখুন যে এটি পাঠ্যের নীচের অংশ এবং লাইনের মধ্যে জায়গা ছাড়াই আঁকা হয়েছে, তবে এটি সমস্যার সমাধান করে।

— জোনাথন ক্রস

এটি কোনও কার্যকারিতা ছাড়াই আধুনিক ব্রাউজারগুলির জন্য সঠিক উত্তর।

— পারস শাহ

এটি ফায়ারফক্সে, এমনকি বিক্রেতা-উপসর্গের সাথেও কাজ করে না - তবে এটি একটি ডাব্লু 3 সি অনুচ্ছেদে : w3.org/TR/css-text-decor-3/#text-undline-position-property । অন্যান্য প্রাসঙ্গিক সম্পদ: quackit.com/css/css3/properties/css_text-underline-position.cfm

— rosell.dk

এই মুহুর্ত হিসাবে, এটি কেবল ক্রোম ব্রাউজারে কাজ করে এবং অন্যান্য ব্রাউজারগুলির জন্য এটি কোনও সমাধান নয়।

— মিয়ার

ঠিক আছে, এই মন্তব্যের তারিখ হিসাবে, আমি ফায়ারফক্সেও এটি কাজ করে দেখছি ।

— জারাদ

Answer 4

এখানে আমার জন্য ভাল কাজ করে।

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>

Comments

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে text-underline-positionফায়ারফক্সের অধীনে বিকাশকারী.মোজিলা.আর.এন.এন.ইউএস

— ডকস / ওয়েব / সিএসএস

খুব আকর্ষণীয়. দুর্দান্ত কলআউট ধন্যবাদ!

— জর্ডান স্টার্ক

একই লিঙ্ক অনুসারে ফায়ারফক্সে সমর্থিত 74৪ থেকে শুরু করে।

— জিসার্গ

Answer 5

এর ভিজ্যুয়াল স্টাইলের বিশদ বিবরণে প্রবেশ text-decoration:underlineকরা বেশ নিরর্থক, সুতরাং আপনাকে কোনও ধরণের হ্যাক মুছে ফেলতে হবে text-decoration:underlineএবং সিএসএসের যাদুতে দূরের-দূরবর্তী ভবিষ্যতের সংস্করণটি আমাদের আরও নিয়ন্ত্রণ না দেওয়া পর্যন্ত এটিকে অন্য কোনও জায়গায় প্রতিস্থাপন করবে until ।

এটি আমার পক্ষে কাজ করেছে:

   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;
}

<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>

• পাঠ্য থেকে লাইনটি কতদূর রয়েছে তা পরিবর্তন করতে% মানগুলি (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: অবতরণকারীদের টিপ

যদি আপনার দৃ background় ব্যাকগ্রাউন্ডের রঙ থাকে তবে বংশধরদের সুন্দর দেখতে আপনার পটভূমির মতো পাতলা text-strokeবা text-shadowএকই রঙে যুক্ত করার চেষ্টা করুন ।

ধার

এটি মূলত https://eager.io/app/smartunderline এ পাওয়া কৌশলটির সহজতর সংস্করণ , তবে নিবন্ধটি পরে নেওয়া হয়েছে।

Comments

দুর্ভাগ্যক্রমে eager.io লিঙ্কটি আর কাজ করে না। আপনি কি মনে করতে পারেন যে বংশধরদের আরও সুন্দর দেখানোর জন্য হ্যাকটি কী ছিল?

— কানো

@ কানো - আমি বিশ্বাস করি এটি শক্ত পটভূমির মতো একই রঙে পাঠ্য-ছায়া ব্যবহার করছিল।

— স্কয়ারকাণ্ডি

এছাড়াও উপরের কৌশলটির সাহায্যে আপনি পাঠ্যের চেয়ে আন্ডারলাইনের রঙ নির্ধারণ করতে পারেন, তাই মাঝে মাঝে আমি এটিকে পাঠ্যের চেয়ে হালকা হিসাবে সেট করে থাকি, যা পাঠকের পক্ষে সমস্যাগুলির কম উত্তরদারদের সাথে সংঘর্ষ তৈরি করে।

— স্কয়ারকাণ্ডি

Answer 6

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে একক লাইন পাঠ্য সেটিংয়ের জন্য display: inline-blockএবং তারপরে সেট heightকরা আমার পক্ষে সীমানা এবং পাঠ্যের মধ্যবর্তী দূরত্ব নিয়ন্ত্রণ করতে ভাল কাজ করেছে।

Comments

আমার উচ্চতা নির্ধারণ করার দরকার নেই। আমি কেবল এটি অন্য ডিভের মধ্যে আবৃত করেছি এবং আমি যেমন এটি কেন্দ্রিক হতে চেয়েছিলাম ঠিক তখনই আমি আউট ডিভ-এ টেক্সট-সারিবদ্ধ করে রেখেছি।

— গাই লো 2

Answer 7

@ সর্বশেষ সন্তানের উত্তরটি দুর্দান্ত উত্তর!

যাইহোক, আমার এইচ 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;
}

Comments

এইচ 2 গুলি হ'ল ব্লক উপাদান যা ব্যাখ্যা করতে পারে যে পাঠ্যটির চেয়ে নিম্নরেখাটি দীর্ঘ ছিল কেন। display: inline-blockএটি ঠিক করতে পারে । পাঠ্যের স্থানটি contentহ্যাকের মতো দেখাচ্ছে যা বিভিন্নভাবে ভেঙে যেতে পারে।

— সর্বশেষ সন্তান

Answer 8

আমার কোলাহল দেখুন ।

আপনার সীমানা প্রস্থের সম্পত্তি এবং প্যাডিংয়ের সম্পত্তিটি ব্যবহার করতে হবে। এটিকে শীতল দেখানোর জন্য আমি কিছু অ্যানিমেশন যুক্ত করেছি:

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>

Answer 9

মাল্টলাইন পাঠ্য বা লিঙ্কগুলির বিকল্প, আপনি আপনার পাঠ্যগুলিকে একটি ব্লক উপাদানের অভ্যন্তরে আবদ্ধ করতে পারেন।

<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/

Answer 10

তুমি যদি চাও:

• একাধিক লাইন
• ফুটকিত্তয়ালা
• কাস্টম নীচে প্যাডিং সহ
• মোড়ক ছাড়া

নিম্নরেখাঙ্কিত, আপনি 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

Answer 11

আপনি যদি ব্যবহার করে থাকেন text-decoration: underline;তবে আপনি ব্যবহার করে আন্ডারলাইন এবং পাঠ্যের মধ্যে স্থান যোগ করতে পারেনtext-underline-position: under;

আরও জন্য পাঠ্য-আন্ডারলাইন-অবস্থান বৈশিষ্ট্য, আপনি এখানে দেখতে পারেন

Answer 12

আমি ইউ ব্যবহার করে এটি করতে সক্ষম হয়েছি (আন্ডারলাইন ট্যাগ)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

Answer 13

এটি আমি ব্যবহার করি:

এইচটিএমএল:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

CSS:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

Answer 14

আমি যা ব্যবহার করি:

<span style="border-bottom: 1px solid black"> Enter text here </span>