جا دادن یک متن طولانی در کادر توسط Html و Css
یک کادر دارم که قراره توش متن نمایش بدم. اندازه کادر ثابت هست مثلا 250 پیکسل در 250 پیکسل. ولی اندازه متن ثابت نیست و ممکنه خیلی بیشتر یا کمتر بشه.
لطفا راهنمایی کنید چجوری توسط css متن رو بدون اینکه صفحه طراحی شده بهم بریزه توی این کادر جا کنم؟
جا دادن یک متن طولانی در کادر توسط 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 اگر متن شما از طول و عرض کادر بیشتر شد نوار پیمایش نمایش داده می شود و در غیر این صورت نمایش داده نمی شود.
|
تاریخ :
1403/08/29
- ساعت :
07:15:00 PM
- بازدید :
117
- پاسخ :
0
|
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
948
- پاسخ :
1
|
|
تاریخ :
1398/09/21
- ساعت :
09:53:00 AM
- بازدید :
5973
- پاسخ :
7
|
|
تاریخ :
1399/06/16
- ساعت :
07:18:00 PM
- بازدید :
7893
- پاسخ :
4
|
|
تاریخ :
1403/02/19
- ساعت :
01:52:00 PM
- بازدید :
391
- پاسخ :
1
|
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2587
- پاسخ :
2
|
|
تاریخ :
1402/08/04
- ساعت :
05:01:00 PM
- بازدید :
834
- پاسخ :
1
|
|
تاریخ :
1402/08/06
- ساعت :
01:20:00 PM
- بازدید :
720
- پاسخ :
1
|
|
تاریخ :
1402/07/25
- ساعت :
09:15:00 PM
- بازدید :
1105
- پاسخ :
1
|
|
تاریخ :
1399/12/13
- ساعت :
12:10:00 AM
- بازدید :
3503
- پاسخ :
1
|
|
تاریخ :
1403/09/06
- ساعت :
09:51:00 PM
- بازدید :
87
- پاسخ :
1
|
|
تاریخ :
1400/07/17
- ساعت :
10:39:00 PM
- بازدید :
2335
- پاسخ :
0
|
|
تاریخ :
1403/09/05
- ساعت :
06:32:00 PM
- بازدید :
70
- پاسخ :
1
|
|
تاریخ :
1401/02/24
- ساعت :
02:17:00 PM
- بازدید :
2037
- پاسخ :
1
|
|
تاریخ :
1403/08/29
- ساعت :
07:15:00 PM
- بازدید :
117
- پاسخ :
0
|
|
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
149
- پاسخ :
0
|
|
تاریخ :
1402/07/23
- ساعت :
04:01:00 PM
- بازدید :
1067
- پاسخ :
1
|
|
تاریخ :
1403/05/30
- ساعت :
09:22:00 AM
- بازدید :
473
- پاسخ :
1
|
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
948
- پاسخ :
1
|
|
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1378
- پاسخ :
1
|