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

CSS white-space প্রোপার্টি দিয়ে এলিমেন্টের ভেতরে হোয়াইটস্পেস নিয়ন্ত্রণ করুন

white-space প্রোপার্টি একটি এলিমেন্টের ভেতরে হোয়াইটস্পেস (স্পেস, ট্যাব, নিউলাইন) কীভাবে হ্যান্ডেল হবে তা নির্ধারণ করে।

উদাহরণ

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      p.demo1 { 
        white-space: normal; 
      } 
      p.demo2 { 
        white-space: pre; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Control white-space</h2> 
    <p class="demo1"> 
      This is demo text.     This is demo text. 
    </p> 
    <p class="demo2"> 
      This is demo text.     This is demo text. 
    </p> 
  </body> 
</html>

ব্যাখ্যা:

  • normal (ডিফল্ট): একাধিক স্পেস/নিউলাইন এক স্পেসে মিলায়, টেক্সট র‍্যাপ হয়।
  • pre: স্পেস/নিউলাইন সংরক্ষণ করে, <pre> ট্যাগের মতো আচরণ করে, র‍্যাপ হয় না।
  • nowrap: স্পেস মিলায় কিন্তু র‍্যাপ হয় না।
  • pre-wrap: স্পেস সংরক্ষণ করে এবং র‍্যাপ হয়।
  • pre-line: নিউলাইন সংরক্ষণ করে, স্পেস মিলায়, র‍্যাপ হয়।
  • break-spaces: pre-wrap-এর মতো কিন্তু শেষ স্পেসও সংরক্ষণ করে।
  1. CSS দিয়ে HR এলিমেন্ট স্টাইল করার পদ্ধতি

  2. CSS দিয়ে স্টিকি (Sticky) এলিমেন্ট তৈরি

  3. CSS দিয়ে হোভার করলে জুম/স্কেল ইফেক্ট তৈরি

  4. CSS ব্যবহার করে একটি এলিমেন্টকে সার্কুলার পাথে সরানো