কোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য

Articles

এই প্রবন্ধটি কোড প্রদর্শন এবং উদ্ধৃতির সাথে সম্পর্কিত CSS বৈশিষ্ট্যগুলি ব্যাখ্যা করে।

আপনি CSS প্রোপার্টি সম্পর্কে জানতে পারবেন যা কোড প্রদর্শন এবং উদ্ধৃতির সাথে সম্পর্কিত, যেমন quotes এবং user-select, তাদের ব্যবহার ক্ষেত্র এবং কীভাবে এগুলি লিখতে হয়।

YouTube Video

প্রিভিউর জন্য HTML

css-code-quotation.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

কোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য

`white-space` প্রোপার্টি

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

white-space প্রোপার্টি একটি CSS প্রোপার্টি যা নির্ধারণ করে কিভাবে একটি উপাদানের ভেতরে ফাঁকা স্থান এবং লাইন ব্রেক হ্যান্ডেল করা হয়। ডিফল্টভাবে, HTML একাধিক স্থানকে একটি স্পেস হিসাবে আচরণ করে, তবে white-space প্রোপার্টিটি এই আচরণটি পরিবর্তন করার অনুমতি দেয়।

`white-space`-এর প্রধান মানগুলি

normal হল ডিফল্ট মান, যেখানে একাধিক স্পেস একটিতে সংকুচিত হয়, এবং লাইন স্বয়ংক্রিয়ভাবে ব্রেক হয়।
nowrap স্পেসগুলোকে একক স্পেসে সংকুচিত করে কিন্তু লাইন ব্রেক প্রতিরোধ করে। সামগ্রীটি একক লাইনে প্রদর্শিত হয়।
pre ফাঁকা স্থান এবং লাইন ব্রেককে তাদের আসল অবস্থায় ধরে রাখে। লাইন মোড়ানো ঘটে না।
pre-wrap ফাঁকা স্থান এবং লাইন ব্রেক ধরে রাখে এবং একই সাথে লাইন মোড়ানোর অনুমতি দেয়।
pre-line স্পেসগুলিকে সংকুচিত করে কিন্তু লাইন ব্রেক ধরে রাখে এবং লাইন মোড়ানোর অনুমতি দেয়।
break-spaces স্পেস এবং লাইন ব্রেক ধরে রাখে এবং দীর্ঘ শব্দ বা ফাঁকা স্থানে বিরতির অনুমতি দেয়।

`overflow-wrap` প্রোপার্টি

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

overflow-wrap প্রোপার্টি, যা পূর্বে word-wrap নামে পরিচিত ছিল, নির্ধারণ করে শব্দগুলি কিভাবে হ্যান্ডেল করা হয় যখন তারা কন্টেইনারের প্রস্থ অতিক্রম করে। এই প্রোপার্টিটি ব্যবহার করে, আপনি শব্দগুলোকে সঠিকভাবে মোড়াতে পারবেন যাতে টেক্সট ওভারফ্লো বা লেআউট ভাঙার ঘটনা এড়ানো যায়।

এই উদাহরণে, normal এর সাথে দীর্ঘ শব্দগুলি কন্টেইনারের বাইরে চলে যেতে পারে এবং অনুভূমিক স্ক্রলিং ঘটাতে পারে, কিন্তু break-word দীর্ঘ শব্দগুলোকে মোড়াতে বাধ্য করে।

প্রোপার্টি মানগুলি

overflow-wrap মূলত দুটি মান রয়েছে:।

normal

normal হলো ডিফল্ট মান, যেখানে ব্রাউজার মানক শব্দ-মোড়ানোর নিয়ম অনুসরণ করে। সাধারণত, শব্দগুলো শুধুমাত্র ফাঁকা স্থান বা হাইফেনের মতো বিভাজ্য পয়েন্টে মোড়ানো হয়। যদি একটি শব্দ অত্যন্ত দীর্ঘ হয়, এটি কন্টেইনারের প্রস্থ অতিক্রম করতে পারে এবং লেআউট ভেঙে দিতে পারে।
break-word break-word প্রয়োজনে একটি লাইন ব্রেক বাধ্যতামূলক করে, শব্দের দৈর্ঘ্যের তোয়াক্কা না করেই টেক্সটকে পরবর্তী লাইনে সরায়। এটি দীর্ঘ শব্দের কারণে ধারক লেআউট ভেঙে পড়া প্রতিরোধে সাহায্য করে।

যখন break-word নির্দিষ্ট করা হয়, তখন শব্দগুলি পর্দার প্রস্থের মধ্যে ফিট করার জন্য এমন স্থানেও মোড়ানো হয় যেখানে ফাঁকা স্থান বা হাইফেন নেই। এটি বিশেষত URL বা খুব দীর্ঘ শব্দগুলির জন্য উপকারী।

`overflow-wrap` এবং অন্যান্য প্রপার্টিগুলির মধ্যে পার্থক্য

overflow-wrap এর সঙ্গে সামঞ্জস্যপূর্ণ প্রপার্টিগুলির মধ্যে রয়েছে word-break এবং white-space।

`word-break` থেকে পার্থক্য

word-break পুরো শব্দগুলি কীভাবে পরিচালনা করা হয় তা সংজ্ঞায়িত করে, যেখানে overflow-wrap শুধুমাত্র তখন কার্যকর হয় যখন একটি শব্দ ধারকের প্রস্থ ছাড়িয়ে যায়। উদাহরণস্বরূপ, word-break: break-all; যেকোনো স্থানে শব্দ ভাঙে, এমনকি যদি সেগুলি দীর্ঘ না হয়, যেখানে overflow-wrap কেবল শব্দগুলি মোড়ানো হয় যখন তারা ধারকটি ছাড়িয়ে যায়।

`white-space` থেকে পার্থক্য

white-space প্রপার্টি পুরো পাঠ্যে লাইন বিরতি এবং স্পেস কিভাবে পরিচালিত হবে তা নিয়ন্ত্রণ করে। overflow-wrap এর থেকে ভিন্ন, white-space নির্ধারণ করে লাইন বিরতি এবং স্পেস সংরক্ষিত হবে কিনা, তবে এটি সরাসরি শব্দ মোড়ানোর উপর প্রভাব ফেলে না।

উদাহরণস্বরূপ, white-space: nowrap; নিশ্চিত করে যে পুরো পাঠ্যটি একটি লাইনে থাকবে এবং মোড়ানো হবে না। অন্যদিকে, overflow-wrap পাঠ্য মোড়ানো নিয়ন্ত্রণ করে।

বাস্তবিক ব্যবহার ক্ষেত্রসমূহ

overflow-wrap নিম্নলিখিত পরিস্থিতিতে বিশেষভাবে উপকারী:।

URL প্রদর্শন: দীর্ঘ URL প্রদর্শনের ক্ষেত্রে লেআউট সমস্যাগুলি প্রতিরোধ করে।
প্রযুক্তিগত শব্দ: এমন ক্ষেত্রে পরিচালনা করতে সাহায্য করে যেখানে পরপর ইংরেজি শব্দ বা প্রযুক্তিগত শব্দ ধারকের প্রস্থ ছাড়িয়ে যায়।
রেসপন্সিভ ডিজাইন: নিশ্চিত করে যে দীর্ঘ পাঠ্যটি ছোট স্ক্রিনেও লেআউট ভেঙে যায় না।

`quotes` বৈশিষ্ট্য

1q {
2    quotes: "(" ")" "[" "]";
3}

quotes বৈশিষ্ট্যটি উদ্ধৃতিচিহ্ন কাস্টমাইজ করার জন্য ব্যবহৃত হয়। সাধারণত, উদ্ধৃতি চিহ্ন স্বয়ংক্রিয়ভাবে যুক্ত হয় যখন <blockquote> বা <q> উপাদানের বিষয়বস্তুর চারপাশে থাকে, তবে quotes বৈশিষ্ট্য ব্যবহার করে আপনি কাস্টম উদ্ধৃতি চিহ্ন নির্ধারণ করতে পারেন।

এই উদাহরণে, বৃত্তাকার বন্ধনী ((, )) বাইরের উদ্ধৃতি চিহ্ন হিসেবে ব্যবহার করা হয়েছে। অতিরিক্তভাবে, অভ্যন্তরীণ বা নেস্টেড উদ্ধৃতি চিহ্নগুলি বর্গাকার বন্ধনী ([, ]) দিয়ে উপস্থাপন করা হয়।

সিনট্যাক্স

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

quotes বৈশিষ্ট্যটি নিম্নলিখিত মান দিয়ে নির্দিষ্ট করা যেতে পারে:।

none: কোনো উদ্ধৃতি চিহ্ন প্রদর্শিত হবে না।
উদ্ধৃতি চিহ্নের একটি সিরিজ: খোলার এবং বন্ধ করার উদ্ধৃতি চিহ্ন নির্ধারণ করুন। প্রথম সেটটি বাইরের উদ্ধৃতি চিহ্ন নির্দেশ করে, আর পরবর্তী সেটগুলি অভ্যন্তরীণ উদ্ধৃতির জন্য।

`quotes` এর প্রধান পয়েন্টগুলো:

quotes বৈশিষ্ট্যটি পাঠ উদ্ধৃতিতে ব্যবহৃত উদ্ধৃতি চিহ্ন কাস্টমাইজ করার জন্য একটি কার্যকর বৈশিষ্ট্য। ডিজাইন এবং ভাষার অনুযায়ী উপযুক্ত উদ্ধৃতি চিহ্ন সেট করে, আপনি একটি আরও উন্নত পৃষ্ঠার প্রেজেন্টেশন অর্জন করতে পারেন। quotes বৈশিষ্ট্য ব্যবহার করার সুবিধাসমূহ নিম্নরূপ:।

উদ্ধৃতি চিহ্ন কাস্টমাইজ করুন: আপনি ডিফল্ট উদ্ধৃতি চিহ্নের আকৃতি পরিবর্তন করতে বা নির্দিষ্ট ডিজাইনের জন্য উপযোগী উদ্ধৃতি চিহ্ন সেট করতে পারেন।
নেস্টেড উদ্ধৃতি সমর্থন করে: নেস্টেড উদ্ধৃতির জন্য বিভিন্ন সেটের উদ্ধৃতি চিহ্ন প্রয়োগ করতে পারেন।
দেশ এবং ভাষা অনুযায়ী কাস্টমাইজযোগ্য: ভাষা বা দেশের উপর নির্ভর করে ভিন্ন শৈলীর উদ্ধৃতি চিহ্ন সহজেই প্রয়োগ করা যায়, যা আন্তর্জাতিক ওয়েবসাইটের জন্য উপযোগী।

`user-select` বৈশিষ্ট্য

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

user-select বৈশিষ্ট্যটি একটি CSS বৈশিষ্ট্য যা ব্যবহারকারীরা টেক্সট নির্বাচন করতে পারবে কিনা তা নিয়ন্ত্রণ করে। এই বৈশিষ্ট্য ব্যবহার করে, আপনি নির্দিষ্ট উপাদান বা সম্পূর্ণ পৃষ্ঠায় টেক্সট কপি হওয়া প্রতিরোধ করতে পারেন, অথবা এটিকে নির্বাচিতযোগ্য করতে পারেন। user-select প্রোপার্টির জন্য আপনি যদি all নির্ধারণ করেন, তবে পুরো উপাদান একবারে নির্বাচন করা হয়। উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী একটি টেক্সট ক্ষেত্র বা প্যারাগ্রাফে ক্লিক করেন, তখন পুরো উপাদান একবারে নির্বাচন করা হয়।
এটি সোর্স কোডের সামগ্রিক নির্বাচন করার জন্যও ব্যবহার করা যেতে পারে।
এই উদাহরণে, প্রথম প্যারাগ্রাফের পাঠ্য নির্বাচনযোগ্য, তবে দ্বিতীয় প্যারাগ্রাফের পাঠ্য নির্বাচনযোগ্য নয়। select-all ক্লাসে, user-select প্রোপার্টিটি all হিসেবে সেট করা হয়েছে, যা পুরো উপাদানকে একবারে নির্বাচন করতে দেয়।

সিনট্যাক্স

1element {
2    user-select: auto | none | text | all | contain;
3}

user-select প্রোপার্টির জন্য নিম্নলিখিত মান নির্ধারণ করা যেতে পারে:।

auto: ব্রাউজারের ডিফল্ট আচরণ প্রয়োগ করুন। বেশিরভাগ উপাদানের উপর টেক্সট নির্বাচন করার অনুমতি রয়েছে, তবে কিছু ইন্টার‌্যাকটিভ উপাদান যেমন বোতাম এবং লিঙ্কে সীমাবদ্ধ হতে পারে।
none: টেক্সট নির্বাচন পুরোপুরি নিষ্ক্রিয়। ব্যবহারকারীরা সেই উপাদানের ভিতরের পাঠ্য নির্বাচন করতে সক্ষম হবেন না।
text: কেবল উপাদানের ভিতরের পাঠ্য নির্বাচন করার অনুমতি দেয়।
all: পুরো উপাদান একবারে নির্বাচন করা হয়। আংশিক নির্বাচনের পরিবর্তে, পুরো উপাদান সম্পূর্ণরূপে নির্বাচন করা হয়।
contain: শুধুমাত্র কিছু ব্রাউজারে সমর্থিত। ক্লিক করা স্থানের শুধুমাত্র সেই উপাদানটি নির্বাচন করার অনুমতি দেয়।

সমর্থিত ব্রাউজারসমূহ

user-select প্রোপার্টি বেশিরভাগ আধুনিক ব্রাউজার দ্বারা সমর্থিত। তবে, কিছু ব্রাউজারে -webkit-user-select এর মতো ভেন্ডর প্রিফিক্স প্রয়োজন হতে পারে।

Chrome: সমর্থিত
Firefox: সমর্থিত
Safari: সমর্থিত (প্রয়োজন -webkit- প্রিফিক্স)
Edge: সমর্থিত
Internet Explorer: সমর্থিত নয়

প্রধান ব্যবহারের উদাহরণ

user-select প্রোপার্টি নিম্নলিখিত সুবিধা প্রদান করে।

ইউআই উপাদান: ক্লিক বা টেনে আনার প্রক্রিয়ায় ব্যাঘাত ঘটানো এড়াতে টেক্সট নির্বাচন নিষ্ক্রিয় করুন।
টেক্সট কপি প্রতিরোধ: নির্দিষ্ট উপাদানের উপর টেক্সট নির্বাচন এবং কপি করা প্রতিরোধ করুন।
ফর্ম এবং ইন্টারঅ্যাকটিভ উপাদান: এমন ইন্টারঅ্যাকটিভ উপাদানে প্রয়োগ করুন যেখানে টেক্সট নির্বাচন অপ্রয়োজনীয়, ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য।

সারসংক্ষেপ

user-select প্রপার্টি একটি ব্যবহারযোগ্য CSS প্রপার্টি যা একটি ওয়েবপেজে টেক্সট নির্বাচনের উপর নমনীয় নিয়ন্ত্রণ দেয়। এটি ব্যবহারকারীদের অনাবশ্যক টেক্সট ভুল করে নির্বাচন করা থেকে বিরত রাখতে পারে বা এক সাথে সবকিছু বেছে নেওয়ার অনুমতি দিতে পারে, বিভিন্ন ইন্টারঅ্যাকশনের জন্য।

`tab-size` প্রপার্টি

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}

tab-size প্রপার্টি ব্যবহার করা হয় ট্যাব অক্ষরের জন্য স্থান কাস্টমাইজ করতে। ডিফল্টভাবে, ট্যাব প্রস্থ সাধারণত 8 স্পেস হিসাবে সেট থাকে, তবে এটি tab-size প্রপার্টি ব্যবহার করে যে কোনো মানে সামঞ্জস্য করা যেতে পারে।

সিনট্যাক্স

1element {
2    tab-size: length | number;
3}

tab-size প্রপার্টি নিচের ধরণের মান গ্রহণ করতে পারে।

number: অক্ষর সংখ্যার ক্ষেত্রে ট্যাব অক্ষরের প্রস্থ নির্দেশ করে। আপনি একটি পূর্ণ সংখ্যা বা একটি দশমিক নির্দিষ্ট করতে পারেন।
length: দৈর্ঘ্যের একক (যেমন px, em) ব্যবহার করে ট্যাব অক্ষরের প্রস্থ নির্দেশ করে।

নোটস

tab-size প্রপার্টি সাধারণত মনোস্পেস ফন্টের সাথে ব্যবহার করা হয়। প্রোপোরশনাল ফন্টের সাথে ব্যবহার করলে, ট্যাব প্রস্থ অসম হতে পারে।
অক্ষরের সংখ্যা নির্দিষ্ট করার সময়, বিভিন্ন ডিভাইসে স্কেলিং সম্পর্কে সতর্ক থাকুন।

সারসংক্ষেপ

tab-size প্রপার্টি ব্যবহার করলে কোড বা ট্যাব অক্ষর প্রদর্শনের ক্ষেত্রে নমনীয়তা বৃদ্ধি পায়। একজন ডেভেলপার হিসাবে, সঠিকভাবে ট্যাব প্রস্থ সেট করা কোডের পাঠযোগ্যতা এবং নকশার সামঞ্জস্য নিশ্চিত করে।

`text-indent` প্রপার্টি

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}

text-indent প্রপার্টি একটি ব্লক উপাদানের মধ্যে প্রথম লাইনের টেক্সট নির্দিষ্ট দূরত্বে ইন্ডেন্ট করতে ব্যবহৃত হয়। এই প্রপার্টি আপনাকে প্যারাগ্রাফের শুধু প্রথম লাইন সাজাতে দেয়।

সিনট্যাক্স

1element {
2    text-indent: length | percentage;
3}

text-indent প্রপার্টি নিচের ধরণের মান গ্রহণ করতে পারে।

length: দৈর্ঘ্যের একক (যেমন px, em) ব্যবহার করে ইন্ডেন্টেশন নির্দেশ করে।
percentage: কন্টেইনার উপাদানের প্রস্থের উপর ভিত্তি করে শতাংশ হিসাবে ইন্ডেন্টেশন নির্দেশ করে।

নোটস

text-indent শুধুমাত্র ব্লক উপাদানগুলিতে প্রযোজ্য। এটি ইনলাইন উপাদানগুলিতে কোনো প্রভাব ফেলে না।

সারসংক্ষেপ

text-indent বৈশিষ্ট্যটি পাঠযোগ্য টেক্সট ডিজাইন তৈরি করার জন্য একটি সহজ কিন্তু শক্তিশালী টুল। মৌলিক বিষয়গুলি আয়ত্ত এবং উন্নত ব্যবহার ক্ষেত্রে এবং বিবেচনাগুলি বোঝার মাধ্যমে আপনি আরও কার্যকরভাবে স্টাইল করতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

টেক্সট ব্যবধান সম্পর্কিত CSS বৈশিষ্ট্যগুলি বক্স মডেলের সাথে সম্পর্কিত CSS প্রোপার্টিসমূহ

কোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য

YouTube Video

প্রিভিউর জন্য HTML

কোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য

white-space প্রোপার্টি

white-space-এর প্রধান মানগুলি

overflow-wrap প্রোপার্টি

প্রোপার্টি মানগুলি

overflow-wrap এবং অন্যান্য প্রপার্টিগুলির মধ্যে পার্থক্য

word-break থেকে পার্থক্য

white-space থেকে পার্থক্য

বাস্তবিক ব্যবহার ক্ষেত্রসমূহ

quotes বৈশিষ্ট্য

সিনট্যাক্স

quotes এর প্রধান পয়েন্টগুলো:

user-select বৈশিষ্ট্য

সিনট্যাক্স

সমর্থিত ব্রাউজারসমূহ

প্রধান ব্যবহারের উদাহরণ

সারসংক্ষেপ

tab-size প্রপার্টি

সিনট্যাক্স

নোটস

সারসংক্ষেপ

text-indent প্রপার্টি

সিনট্যাক্স

নোটস

সারসংক্ষেপ

YouTube Video

`white-space` প্রোপার্টি

`white-space`-এর প্রধান মানগুলি

`overflow-wrap` প্রোপার্টি

`overflow-wrap` এবং অন্যান্য প্রপার্টিগুলির মধ্যে পার্থক্য

`word-break` থেকে পার্থক্য

`white-space` থেকে পার্থক্য

`quotes` বৈশিষ্ট্য

`quotes` এর প্রধান পয়েন্টগুলো:

`user-select` বৈশিষ্ট্য

`tab-size` প্রপার্টি

`text-indent` প্রপার্টি