CSS লিখন প্রভাব

CSS টেক্সট ওভারফ্লো, পূর্ণ হিসাবে বিন্যাস, ভার্টিক্যাল রুলস এবং লিখন মোড

এই চাপ্তির মধ্যে, আপনি নিম্নলিখিত বৈশিষ্ট্যগুলো শিখবেন:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS টেক্সট ওভারফ্লো

CSS text-overflow এই বৈশিষ্ট্যটি নির্দেশ করে কিভাবে ব্যবহারকারীকে দেখানো হবে যেমন অদৃশ্য অতিরিক্ত কনটেন্ট

কাটা হতে পারে:

এটা হল এমন দীর্ঘ টেক্সট যা বক্সে ধার্য করা যায় না। এটা হল এমন দীর্ঘ টেক্সট যা বক্সে ধার্য করা যায় না

বা তা হিসাবেও প্রদর্শন করা যেতে পারে (অথবা ...) :

এটা হল এমন দীর্ঘ টেক্সট যা বক্সে ধার্য করা যায় না। এটা হল এমন দীর্ঘ টেক্সট যা বক্সে ধার্য করা যায় না

CSS কোড নিম্নরূপ:

উদাহরণ

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; 
{}

আপনার নিজেই প্রয়োগ করুন

নিচের উদাহরণটি দেখায় কিভাবে এলিমেন্টের ওভারফ্লো কনটেন্টকে হলোকরা যায়:

উদাহরণ

div.test:hover {
  overflow: visible;
{}

আপনার নিজেই প্রয়োগ করুন

CSS শব্দ স্থানান্তরিত (Word Wrapping)

CSS word-wrap এই অ্যাট্রিবিউট দীর্ঘ টেক্সটকে বিভক্ত করে আগামী লাইনে স্থানান্তরিত করতে সক্ষম করে দেয়。

যদি একটি শব্দ খুব দীর্ঘ হয়ে যেতে পারে না এবং একটি অঞ্চলে স্থান করা যায় না, তবে তা বাইরে ছুঁয়ে যাবে:

এই প্যারাগ্রাফে একটি অত্যন্ত দীর্ঘ শব্দ রয়েছে: thisisaveryveryveryveryveryverylongword. দীর্ঘ শব্দটি বিভক্ত হবে এবং আগামী লাইনে স্থানান্তরিত হবে:

word-wrap অ্যাট্রিবিউটের মাধ্যমে, আপনি টেক্সটকে বাধ্যতামূলকভাবে স্থানান্তরিত করতে পারেন - যার ফলে শব্দের মধ্যে স্থানান্তরিত হবে:

এই প্যারাগ্রাফে একটি অত্যন্ত দীর্ঘ শব্দ রয়েছে: thisisaveryveryveryveryveryverylongword. দীর্ঘ শব্দটি বিভক্ত হবে এবং আগামী লাইনে স্থানান্তরিত হবে:

CSS কোড নিম্নরূপ:

উদাহরণ

দীর্ঘ শব্দকে বিভক্ত করে আগামী লাইনে স্থানান্তরিত করা হবে:

p {
  word-wrap: break-word;
{}

আপনার নিজেই প্রয়োগ করুন

CSS লাইন বিভক্তির নিয়ম

CSS word-break এই অ্যাট্রিবিউট লাইন বিভক্তির নিয়ম নির্দেশ করে。

এই প্যারাগ্রাফে কিছু টেক্সট রয়েছে। এই লাইনটি হাইফেনে বিভক্ত হবে:

এই প্যারাগ্রাফে কিছু টেক্সট রয়েছে। এই লাইনটি হাইফেনে বিভক্ত হবে:

এই প্যারাগ্রাফে কিছু টেক্সট রয়েছে। এই লাইনটি হাইফেনে বিভক্ত হবে:

এই প্যারাগ্রাফে কিছু টেক্সট রয়েছে। লাইনগুলি কোনো অক্ষরেই বিভক্ত হবে:

CSS কোড নিম্নরূপ:

উদাহরণ

p.test1 {
  word-break: keep-all;
{}
p.test2 {
  word-break: break-all;
{}

আপনার নিজেই প্রয়োগ করুন

CSS লিখন মোড

CSS writing-mode এই অ্যাট্রিবিউট নির্দেশ করে কীভাবে টেক্সট লাইনগুলি অনুবর্তিত হবে - হলেও তা স্থানান্তরিত হবে কিনা।

একটি span ইলেকট্রনের সাথে কিছু টেক্সট রয়েছে vertical-rl writing-mode.

নিচের উদাহরণগুলিতে বিভিন্ন লিখন মোড দেখানো হল:

উদাহরণ

p.test1 {
  writing-mode: horizontal-tb; 
{}
span.test2 {
  writing-mode: vertical-rl; 
{}
p.test2 {
  writing-mode: vertical-rl; 
{}

আপনার নিজেই প্রয়োগ করুন

CSS টেক্সট ইফেক্ট অ্যাট্রিবিউটস

এই টেবিলে CSS টেক্সট ইফেক্ট অ্যাট্রিবিউটস তালিকাভুক্ত হল:

属性 বর্ণনা
text-align-last টেক্সটের শেষ লাইনকে কিভাবে বৈচিত্র্যপূর্ণভাবে প্রদর্শন করা হবে
text-justify একল লাইনের টেক্সটকে কিভাবে বৈচিত্র্যপূর্ণভাবে এবং অন্তর্বর্তী স্পেস নিয়ে প্রদর্শন করা হবে
text-overflow নিহিত অদৃশ্য কনটেন্টকে কিভাবে প্রদর্শন করা হবে তা নির্দিষ্ট করে
word-break নন-CJK লিপির বাক্য বিভক্তির নিয়ম নির্দিষ্ট করে
word-wrap দীর্ঘ শব্দকে ভাগ করে আগত ওয়ার লাইনে নিয়ে যাওয়ার অনুমতি দেয়
writing-mode সংজ্ঞায়িত টেক্সট লাইনটি হবে স্থানীয় কিংবা ভিক্টিক্যাল অবস্থান করা হবে