X

X

X

CSS3 Text । টেক্সট


CSS3 Text

CSS3 এর প্রপার্টি ব্যবহার করে কোনো ইলামেন্টের টেক্সটকে আরও গভীরভাবে নিয়ন্ত্রন করা যায়।

এই অধ্যায়ে নিচের প্রপার্টিসমূহ সম্পর্কে বর্ণনা করা হবে:

  • text-overflow
  • word-wrap
  • word-break

Browser Support

প্রপার্টি
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

CSS3 Text Overflow

The CSS3 text-overflow property ব্যবহার করে বর্ণনা করা হয়, কোনো ইলামেন্টের কন্টেন্ট (টেক্সট) যদি মূল দৃশ্যমান এরিয়ার চাইতে বেশি হয়ে থাকে, সেক্ষেত্রে এটি কিভাবে দৃশ্যমান হবে।

কিছু অংশ বাদ দেওয়া যেতে পারে:

This is some long text that will not fit in the box

অথবা এটিতে (…) যুক্ত করে ইউজারকে নির্দেশনা দেওয়া যেতে পারে যে আরও কিছু কন্টেন্ট রয়েছে:

This is some long text that will not fit in the box

ব্যবহৃত কোডটি নিম্নরূপ:

Code Example

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচের উদাহরণে দেখানো হয়েছে, যখন কোনো ইলামেন্টের উপর মাউস হোভার করা হবে, তখন কিভাবে এর অদৃশ্যমান কন্টেন্ট দৃশ্যমান হয়:

Code Example

div.test {
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden; 
    border: 1px solid #000000;
}

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 Word Wrapping

CSS3 word-wrap property ব্যবহার করে খুব দীর্ঘ ওয়ার্ড বা শব্দকে ভেঙে ছোটো ছোটো ওয়ার্ডে ভাঙা যায়। অর্থাৎ, কোনো শব্দ যদি দৃশ্যমান এরিয়ার প্রস্থের চেয়ে বেশী দীর্ঘ হয়, তবে এটিকে ভেঙে একাধিক লাইনে প্রকাশ করা যায়।

সাধারণত যখন কোনো শব্দ খুব বেশী দীর্ঘ হয়, তখন এটি মূল দৃশ্যমান এরিয়ার বাইরে দৃশ্যমান হয়, যেটি অনাকাঙ্খিত। এই সমস্যা দূর করার জন্য word-wrap property ব্যবহার করা হয়।

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

word-wrap property ব্যবহার করে দীর্ঘ শব্দকে ভেঙে ছোটো ছোটো অংশে ভাগ করা হয়, এবং তাদেরকে মূল দৃশ্যমান এরিয়ার মধ্যে দৃশ্যমান করা হয়।

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

নিচে ব্যবহৃত কোডটি উপস্থাপণ করা হলো:

Code Example

p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 Word Breaking

CSS3 word-break property ব্যবহার করে line breaking rule বর্ণনা করা হয়:

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

ব্যবহৃত কোডটি নিম্নরূপ:

Code Example

p.test1 {
    width: 140px; 
    border: 1px solid #000000;
    word-break: keep-all;
}

p.test2 {
    width: 140px; 
    border: 1px solid #000000;
    word-break: break-all;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুণ!

Exercise 1 »  Exercise 2 »  Exercise 3 »


CSS3 Text Property সমূহ

প্রপার্টি বর্ণনা
text-align-last কোনো টেক্সটের সর্বশেষ লাইনটি কিভাবে এলাইন্ড হবে সেটি বর্ণনা করা হয়।
text-justify টেক্সট এলাইনমেন্ট বর্ণনার জন্য ব্যবহৃত হয়।
text-overflow মূল এরিয়ার চাইতে অধিক টেক্সট হলে সেটি কিভাবে দৃশ্যমান হবে, তা বর্ণনা করার জন্য এটি ব্যবহৃত হয়।
word-break non-CJK script এর জন্য line breaking rule বর্ণনা করা হয়।
word-wrap খুব দীর্ঘ শব্দকে ভেঙে একাধিক লাইনে উপস্থাপণ করা হয়।