جا دادن یک متن طولانی در کادر توسط Html و Css

مشخصات سوال کننده :

کاربر : hamid_b امتیاز کاربر : 510 رتبه کاربر : 4

دسته بندی : Css Html

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 6430

پاسخ دهنده : fateme 16:45 1399/09/07

جا دادن یک متن طولانی در کادر توسط Html و Css

این کار رو با یک مثال بهتون توضیح میدم. فرض کنید کدهای زیر رو دارید :

<html>
   
     <head>
       <title>Test</title>
      
       <style>
           div
           {
              width:150px;
              height:250px;
              background-color:red;
           }
       </style>
     </head>
   <body>
        <div>
           This is a Test.
        </div>
   </body>

</html>

خب در کد بالا در تگ div عبارت This is a Test نوشته شده که یک عبارت کوتاه هست و مشکلی رو به وجود نمیاره. اما اگر یک متن طولانی در بنویسیم با توجه به اینکه طول و عرض div از قبل مشخص شده این متن از کادر بیرون میره که زیاد جالب نیست.

استفاده از Over-flow در css جهت کنترل خطای سر ریز

خب برای رفع مشکل سرریز میتونید در css از over-flow استفاده کنید. کافیه در کد بالا در بخش style دستور زیر رو اضافه کنید.

over-flow : hidden;

خب توسط کد بالا اون مقدار از متنی که از کادر بیرون میزنه مخفی میشه.

over-flow : scroll;

اگر مقدار over-flow رو برابر با scroll قرار بدید در اطراف کادر شما نوار پیمایش نمایش داده میشه و اگر متن بیشتر از طول و عرض کادر بود خاصیت scroll فعال میشه. اما این حالت یک مشکل دارد و آن هم این است که اگر متن از طول و عرض کادر کوچکتر هم باشد scroll نمایش داده می شود.

over-flow : auto;

توسط مقدار auto اگر متن شما از طول و عرض کادر بیشتر شد نوار پیمایش نمایش داده می شود و در غیر این صورت نمایش داده نمی شود.

به این پاسخ امتیاز بدهید 0

امتیاز: 1617 رتبه: 2

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود