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

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

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

دسته بندی : Css Html

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

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

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

هوش مصنوعی

پاسخ هوش مصنوعی

برای جا دادن متن طولانی در یک کادر با اندازه ثابت، می توانید از CSS برای تنظیم ارتفاع و عرض کادر استفاده کنید و از ویژگی overflow برای کنترل نحوه نمایش متن اضافه استفاده کنید. برای مثال، می توانید از overflow: auto; یا overflow: hidden; استفاده کنید.

در زیر یک مثال از کدی که می توانید استفاده کنید آمده است:



    متن طولانی شما اینجا قرار می گیرد. می توانید هر تعداد خط و کاراکتر که می خواهید اضافه کنید و کادر به خوبی متن را جا می دهد.

با استفاده از کد بالا، متن در کادر با اندازه مشخص قرار می گیرد و اگر متن بیش از اندازه کادر باشد، با استفاده از اسکرول یا مخفی کردن آن نمایش داده می شود.

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

امتیاز: - رتبه: -

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

پاسخ دهنده : 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

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

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

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

سوالات مرتبط

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

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

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

پاسخ هوش مصنوعی

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

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

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

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

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

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