সিএসএস(৩) টেক্সট ইফেক্ট
সিএসএস(৩) তে টেক্সট এর জন্য কিছু নতুন বৈশিষ্ট্য যুক্ত হয়েছে।
এক নজরে সিএসএস(৩) টেক্সট ইফেক্ট প্রোপার্টি
যে সকল কন্টেন্ট ব্যবহারকারী দেখবে না সেগুলোর জন্য একটি সংকেত নির্ধারণ করে।
টেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) লাইন ব্রেক হবে কিনা তা নির্ধারণ করে।
টেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করবে কিনা তা নির্ধারণ করে।
একগুছ টেক্সটের মধ্যে থেকে শেষ লাইনের text-align নির্ধারণ করে।
টেক্সট কিভাবে শ্রেনীবদ্ধ হবে এবং দুরত্ব বজায় রাখবে তা নির্ধারণ করে।
সিএসএস(৩) Text-overflow প্রোপার্টি
কিছু কিছু ক্ষেত্রে কন্টেন্ট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(overflow হয়) এবং প্রদর্শিত হয় না। এ সকল ক্ষেত্রে সিএসএস(৩) text-overflow প্রোপার্টি ব্যবহারকারীকে একটি সংকেত প্রদান করে।
/* 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 |