সিএসএস 3.0 তে কোন লেখা বা text এর ওপর আরও সুন্দর ও সাবলীল ভাবে নিয়ন্ত্রন করা যায়। এর জন্য যে সকল নতুন প্রোপার্টি সিএসএস এ যুক্ত করা হয়েছে, সেগুলো হল নিম্নরূপ।
কখনও কখনও লেখা বা text, ধারক বা container অথবা স্ক্রীন এর থেকে উপচে পরে অর্থাৎ overflow হয়। এতে লেখা বা text কন্টেন্ট গুলো ব্যাবহারকারীর কাছে ঠিক মত বা সঠিক ভাবে প্রদর্শিত হয় না, ফলশ্রুতিতে বাজে user experiance তৈরি হয়।
সিএসএস এর 3.0 সংস্করণে যুক্ত text-overflow প্রোপার্টি ব্যাবহার করে ব্যবহারকারীকে একটি সংকেত প্রদান করা যায়। নিচে এর কয়েকটি ব্যাবহারিক উদাহরন দেখুন।
এখানে text-overflow:clip ব্যাবহার করা হয়েছে।
এখানে text-overflow:ellipsis ব্যাবহার করা হয়েছে।
সিএসএস text-overflow প্রোপার্টির যে সকল মান নির্ধারণ করা যায়, সেগুলো হল - clip, ellipsis, string, initial ও inherit.
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 করার জন্য কিছু সিএসএস প্রোপার্টি ব্যবহার করতে হয়। উদাহরণ স্বরুপ - সিএসএস এর overflow: hidden; ও white-space: nowrap; প্রোপার্টির কথা বলা যায়। নিচে একটি উদাহরন দেখুন।
overflow: hidden; white-space: nowrap;
সিএসএস 3.0 এর word-break ব্যাবহার করে কোন এইচটিএমএল কন্টেন্ট অর্থাৎ লেখা বা text উপচে পড়লে বা overflow হলে লাইন ব্রেক হবে কি না তা নির্ধারণ করা হয়। এখানে যে সকল মান নির্ধারণ করা যায় তা হল keep-all, break-all ইত্যাদি।
নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস word-break প্রোপার্টি ব্যাবহার করা হয়েছে।
p { width: 300px; background-color: gray; height: 80px; border: 1px dotted green; word-break: keep-all; }
নোট - সিএসএস word-break প্রোপার্টি অপেরা 12 এবং এর পূর্ববর্তী সংস্করণ বা version গুলোতে সমর্থন বা support করে না।
সিএসএস এর word-wrap প্রোপার্টি ব্যাবহার করে, কোন দীর্ঘ শব্দ বা word ভেঙে নতুন লাইন এ যাবে কি না তা নির্ধারণ করা হয়। অর্থাৎ কোন বড় শব্দের অবস্থা নির্ধারণ করতে এই প্রোপার্টি ব্যাবহৃত হয়।
নিচে word-wrap প্রোপার্টি ব্যাবহার করে কিছু সিএসএস স্টাইল কোড দেখুন।
p { word-wrap: break-word; }
সিএসএস 3.0 এর writing-mode প্রোপার্টি ব্যাবহার করে কোন লেখা বা text এর আনুভূমিক বা horizontal এবং উলম্ব বা vertical অবস্থান নির্ধারণ করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।
writing-mode প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।
p.vertical { writing-mode: vertical-rl; }
টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -o- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।
প্রপার্টি | |||||
---|---|---|---|---|---|
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 | ||
word-wrap | ||
writing-mode | ||
text-overflow | ||
text-justify |