এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) টেক্সট ইফেক্ট


সিএসএস(৩) তে টেক্সট এর জন্য কিছু নতুন বৈশিষ্ট্য যুক্ত হয়েছে।


এক নজরে সিএসএস(৩) টেক্সট ইফেক্ট প্রোপার্টি

text-overflow

যে সকল কন্টেন্ট ব্যবহারকারী দেখবে না সেগুলোর জন্য একটি সংকেত নির্ধারণ করে।

word-break

টেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) লাইন ব্রেক হবে কিনা তা নির্ধারণ করে।

overflow-wrap

টেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করবে কিনা তা নির্ধারণ করে।

text-align-last

একগুছ টেক্সটের মধ্যে থেকে শেষ লাইনের text-align নির্ধারণ করে।

text-justify

টেক্সট কিভাবে শ্রেনীবদ্ধ হবে এবং দুরত্ব বজায় রাখবে তা নির্ধারণ করে।


সিএসএস(৩) Text-overflow প্রোপার্টি

কিছু কিছু ক্ষেত্রে কন্টেন্ট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(overflow হয়) এবং প্রদর্শিত হয় না। এ সকল ক্ষেত্রে সিএসএস(৩) text-overflow প্রোপার্টি ব্যবহারকারীকে একটি সংকেত প্রদান করে।

এই সংকেতটি বিভিন্ন ধরণের হতে পারে। যেমন- এটি clip, ellipsis(...) string, fade ইত্যাদি হতে পারে। উদাহরণস্বরূপঃ
/* Overflow behavior at line end
   Right end if LTR, left end if RTL */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* Overflow behavior at left end | at right end
   Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

text-overflow প্রোপার্টি overflow ঘটানোর জন্য কোনো শক্তি প্রয়োগ করে না। টেক্সটকে তার কন্টেইনার থেকে overflow করার জন্য আপনাকে কিছু অন্যান্য সিএসএস প্রোপার্টি ব্যবহার করতে হবে। উদাহরণস্বরুপ-

overflow: hidden;
white-space: nowrap;

বিঃদ্রঃ শুধুমাত্র ব্লক কনটেইনার এলিমেন্টের ক্ষেত্রে text-overflow প্রোপার্টি কাজ করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>text efect example</title>
 <style>
p.efectbox {
    white-space: nowrap;
    width: 300px;
    height:80px;
    border: 1.5px solid green;
    overflow: hidden;
    text-overflow: clip;
    background-color: bisque
}
p.efectbox1 {
    white-space: nowrap;
    width: 300px;
    height:80px;
    border: 1.5px solid blue;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: burlywood
}
 </style>
 </head>
 <body>

 <p>নিচের উদাহরণ দুটিতে বক্স এর প্রস্থের তুলনায় টেক্সট দীর্ঘ হওয়ায় টেক্সট বক্সের সাথে ফিট হবে না। </p>
 <p>text-overflow: clip: </p>
 <p class="efectbox"> কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় এগুলো বক্সের সাথে ফিট হবে না। কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় এগুলো বক্সের সাথে ফিট হবে না।</p>
 <p>text-overflow: ellipsis: </p>
 <p class="efectbox1">কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় এগুলো বক্সের সাথে ফিট হবে না। কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় এগুলো বক্সের সাথে ফিট হবে না। </p>


</body>
</html>

ফলাফল



নিম্নের উদাহরণে দেখানো হয়েছে overflow কন্টেন্ট এর উপর মাউস হোভার করলে এটি কিভাবে প্রদর্শিত হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>টেক্সট ইফেক্ট এর উদাহরণ</title>
 <style>
	p.efectbox {
		white-space: nowrap;
		width: 300px;
		background-color: burlywood;
		height:50px;
		border: 1px dotted yellow;
		overflow: hidden;
	}
	p.efectbox:hover {
		text-overflow: inherit;
		overflow: visible;
	}
 </style>
 </head>
 <body>

	 <p>প্রথম বক্সে overflow:ellipsis ব্যবহার করা হয়েেছে এবং দ্বিতীয় বক্সে overflow:clip ব্যবহার করা হয়েছে।</p>
	 <p>ইফেক্ট দেখতে বক্সের উপর মাউস নিন।</p>
	 <p class="efectbox" style="text-overflow:ellipsis;">কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় বক্স থেকে কন্টেন্ট উপচে পড়বে। 
	 কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায় বক্স থেকে কন্টেন্ট উপচে পড়বে।</p>
	 <p> উপরের বক্সে overflow:ellipsis ব্যবহার করায় এটির উপর মাউস নেওয়ার পূর্বে ডট(...) চিহ্ন দেখা যায় এবং উক্ত ডট চিহ্ন 
	 ইউজারকে এই সংকেত দেয় যে, সামনে আরো লেখা আছে।</p>
	 <p> বক্সে মধ্যে মাউস নিন। </p>
	 <p class="efectbox" style="text-overflow:clip;">কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায়  বক্স থেকে কন্টেন্ট উপচে পড়বে।
	 কন্টেন্ট-বক্সের তুলনায় কন্টেন্ট/টেক্সট বেশী হওয়ায়  বক্স থেকে কন্টেন্ট উপচে পড়বে।</p>

</body>
</html>

ফলাফল




সিএসএস(৩) overflow-wrap প্রোপার্টি

যখন একটি শব্দ তার নির্ধারিত এরিয়ার চেয়ে বড় হয় তখন এটি তার এরিয়া থেকে বাইরে সম্প্রসারিত হয়।

সুতরাং যখন কোনো টেক্সট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(overflow হয়) তখন একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করতে সিএসএস(৩) overflow-wrap প্রোপার্টি ব্যবহৃত হয়। 

overflow-wrap প্রোপার্টি টেক্সটকে পরের লাইনে যাওয়ার জন্য বাধ্য করে। এমনকি এটি শব্দের মাঝখান থেকেও text কে বিভক্ত করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>text efect example</title>
<style>
p.efectbox {
    width: 300px;
    height:120px;
    border: 1.5px solid aqua;
    overflow-wrap: break-word;
    background-color: teal
}
 </style>
 </head>
 <body>
 
 <p class="efectbox"> এই প্যারাগ্রাফটি এমন একটি শব্দ বহন করছেঃ
এটিঅনেকঅনেকঅনেকনেকঅনেকনেকনেকঅনেকঅনেকবড়শব্দ। বড় শব্দটি ভেঙে পরবর্তী লাইনে নিয়ে যাবে।  <p>
 <p>লক্ষ্য করুন, উপরের বক্সের বড় শব্দটি ভেঙ্গে পরের লাইনে চলে এসেছে।</p>

</body>
</html>

ফলাফল




সিএসএস(৩) word-break প্রোপার্টি

কোনো টেক্সট তার কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) লাইন ব্রেক হবে কিনা তা নির্ধারণ করার জন্য সিএসএস(৩) word-break প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
 <title>text efect example</title>
 <style>
p.efectbox {
     width: 300px;
    background-color: burlywood;
    height:80px;
    border: 1px dotted green;
    word-break: keep-all;
}
 p.efectbox1 {
    width: 300px;
    background-color: burlywood;
    height:80px;
    border: 1px dotted blue;
    word-break: break-all;
}

</style>
</head>
<body>
<p>হাইফেনে(-) এ লাইন ব্রেক করে </p>
<p class="efectbox"> এই প্যারাগ্রাফটি কিছু টেক্সট বহন করছে। এই-ক্ষেত্রে-হাইফেনে-লাইন-ব্রেক-হবে। </p>
<p> লক্ষ্য করুন, উপরের বক্সে হাইফেন(-) যুক্ত বড় শব্দটি ভেঙ্গে পরের লাইনে চলে এসেছে </p>
<p>যেকোনো ক্যারেক্টারে লাইন ব্রেক হতে পারে। </p>
<p class="efectbox1">যেকোনো ক্যারেক্টারে লাইন ব্রেক। এই প্যারাগ্রাফটি কিছু টেক্সট বহন করছে।
এই ক্ষেত্রে যেকোনো ক্যারেক্টারেই লাইন ব্রেক হতে পারে। </p>


</body>
</html>

ফলাফল



বিশেষ দ্রষ্টব্যঃ word-break প্রোপার্টি অপেরা ১২ এবং পূর্ববর্তী ভার্সনে সাপোর্ট করে না।


ব্রাউজার সাপোর্ট

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
overflow-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0