সিএসএস৩ টেক্সট এফেক্ট - Css3 Text Effects



সিএসএস ৩ এ যে সকল নতুন প্রপার্টি যুক্ত করা হয়েছে সেগুল হল - text-overflow, word-break ও overflow-wrap.


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%);


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

উদাহরণ

overflow: hidden;
white-space: nowrap;


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


word-break প্রপার্টি

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

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

p.example{
width: 300px;
background-color: burlywood;
height:80px;
border: 1px dotted green;
word-break: keep-all;
}


নোট - word-break প্রোপার্টি অপেরা ১২ এবং এর পূর্ববর্তী ভার্সনগুলোতে সমর্থন বা support করে না।


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

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

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

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

p.example{
width: 400px;
height:150px;
border: 1.5px solid aqua;
overflow-wrap: break-word;
background-color: teal
}



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

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -o- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0


সকল টেক্সট এফেক্ট প্রপার্টি

প্রপার্টি বর্ণনা
text-overflowযে সকল কন্টেন্ট ব্যবহারকারী দেখবে না সেগুলোর জন্য একটি সংকেত নির্ধারণ করে।
word-breakটেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) লাইন ব্রেক হবে কিনা তা নির্ধারণ করে।
overflow-wrapটেক্সট কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করবে কিনা তা নির্ধারণ করে।
text-align-lastএকগুছ টেক্সটের মধ্যে থেকে শেষ লাইনের text-align নির্ধারণ করে।
text-justifyটেক্সট কিভাবে শ্রেনীবদ্ধ হবে এবং দুরত্ব বজায় রাখবে তা নির্ধারণ করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.