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 নির্দিষ্ট টেক্সট লাইনটি হবে অনুভূত বা ভূমিকাভূত স্থানান্তরিত হবে