تگ pre در HTML

  /  فرانت اند   /  HTML   /  تگ pre در HTML

با استفاده از تگ pre در HTML میتوان یک متن با فرمت یا قالب دلخواه ایجاد کرد.

مثال

<pre>
آزمایش با        قالب دلخواه است     همانطور
که مشاهده میکنید    
متن ما به همان     شکلی نمایش     داده می شود    که داخل سند    HTML
قرار دارد.
</pre>


تعریف و کاربرد

از تگ pre در HTML برای ساخت متن های از پیش فرمت شده با قالب دلخواه استفاده میکنیم.

متن ها درون تگ <pre> دقیقاً به همان شکلی نمایش داده می شوند که در سند HTML نوشته شده اند و تمامی فاصله ها ، فضاهای خالی ، خط های شکسته در نظر گرفته شده و اعمال می شوند.


پشتیبانی مرورگر ها

عنصر
<pre>بلهبلهبلهبلهبله

خواص عمومی

تگ pre از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ pre از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر pre در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

مثال بیشتر

در مثال زیر یک عرض فیکس شده تنظیم کرده ایم که در صورت طولانی بودن متن شاهد نوار اسکرول جهت مشاهده مابقی متن در تگ <pre> هستیم:

<!DOCTYPE html>
<html dir="rtl">
<body>

<h2>عرض فیکس شده در عنصر pre</h2>
<div style="width:200px;overflow:auto">
<pre>این یک عرض فیکس شده می باشد که در صورت اضافی بودن متن مابقی متون به صورت اسکرول قابل نمایش است.
</pre>
</div>

</body>
</html>

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

ارسال یک نظر