تگ pre در HTML

نوشته شده توسط متین برونسی

منتشر شده در 7 جولای 2021

و آخرین بروزرسانی در 12 جولای 2021

دسته بندی ها:

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>