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

CSS-এ ওয়ার্ড ভিত্তিক লাইন ব্রেক করা


CSS-এ ওয়ার্ড ভিত্তিক লাইন ব্রেক করতে word-break প্রপার্টিটি ব্যবহার করুন। word-break প্রপার্টিটি বাস্তবায়ন করতে নিচের কোডটি চালান:

উদাহরণ

<html>
  <head>
    <style>
      p.text1 {
        width: 140px;
        border: 1px solid #000000;
        word-break: keep-all;
      }
      p.text2 {
        width: 140px;
        border: 1px solid #000000;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <b>হাইফেনে লাইন ব্রেক:</b>
    <p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
    <b>যেকোনো ক্যারেক্টারে লাইন ব্রেক</b>
    <p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
  </body>
</html>

আউটপুট

CSS-এ ওয়ার্ড ভিত্তিক লাইন ব্রেক করা


  1. CSS-এ টেক্সটের শেষ লাইন অ্যালাইন করা

  2. CSS-এ লাইন ব্রেক করে পরবর্তী লাইনে র‍‍্যাপ করা

  3. CSS দিয়ে বাটনের প্রস্থ সেট করুন

  4. CSS দিয়ে ভার্টিক্যাল লাইন (Vertical Line) তৈরি করা