কম্পিউটার টিউটোরিয়াল

CSS-এ column-width প্রোপার্টি দিয়ে কলামের প্রস্থ নির্দিষ্ট করুন

column-width প্রোপার্টি কলামের ইচ্ছিত প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। ব্রাউজার এই প্রস্থের ভিত্তিতে যতটা সম্ভব কলাম তৈরি করে।

উদাহরণ

নিচের কোডটি চালিয়ে column-width প্রোপার্টির ব্যবহার দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo { 
        column-count: 4; 
        column-rule-color: gray; 
        column-rule-style: dashed; 
        column-width: 100px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="demo"> 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
      This is demo text. This is demo text. This is demo text. This is demo text. 
    </div> 
  </body> 
</html>

ব্যাখ্যা: এখানে column-width: 100px; সেট করা হয়েছে, তবে column-count: 4;ও থাকায় ব্রাউজার সর্বোচ্চ ৪টি কলাম তৈরি করবে, প্রতিটির প্রস্থ কমপক্ষে ১০০পিক্সেল হয়।

  1. CSS-এ Em ব্যবহার করে ফন্ট আকার সেট করুন

  2. CSS-এ ::first-line 의사-এলিমেন্ট

  3. CSS-এ @media At-rules

  4. CSS দিয়ে টেক্সট ইন্ডেন্টেশন (Text Indentation) কাজ করা