HTML الوسم <pre>
تعريفه
نستخدم الوسم <pre> على هذا النحو <pre>content</pre> لعرض نص بنفس الشكل الذي تم وضعه فيه.
مكان الكلمة content نقوم بوضع النص الذي سيتم عرضه كما تم وضعه فيه.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <pre>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بوضع النص بداخل الوسم <pre> حتى يتم عرضه كما هو في الصفحة.
المثال الأول
<pre> Name: Mhamad Harmush Job: Programmer Age: 26 </pre>
في المثال التالي قمنا بعرض كود بداخل الوسم <pre> حتى يتم عرضه كما هو في الصفحة.
المثال الثاني
<pre>
<!DOCTYPE html>
<html>
<body>
<p>HTML & CSS are so easy to learn</p>
</body>
</html>
</pre>
في المثال التالي قمنا بوضع الرموز بداخل الوسم <pre> بشكل تظهر فيها و كأنها صورة.
المثال الثالث
<pre> ░░░░░░░░░░░▄▄▀▀▀▀▀▀▀▀▄▄ ░░░░░░░░▄▀▀░░░░░░░░░░░░▀▄▄ ░░░░░░▄▀░░░░░░░░░░░░░░░░░░▀▄ ░░░░░▌░░░░░░░░░░░░░▀▄░░░░░░░▀▀▄ ░░░░▌░░░░░░░░░░░░░░░░▀▌░░░░░░░░▌ ░░░▐░░░░░░░░░░░░▒░░░░░▌░░░░░░░░▐ ░░░▌▐░░░░▐░░░░▐▒▒░░░░░▌░░░░░░░░░▌ ░░▐░▌░░░░▌░░▐░▌▒▒▒░░░▐░░░░░▒░▌▐░▐ ░░▐░▌▒░░░▌▄▄▀▀▌▌▒▒░▒░▐▀▌▀▌▄▒░▐▒▌░▌ ░░░▌▌░▒░░▐▀▄▌▌▐▐▒▒▒▒▐▐▐▒▐▒▌▌░▐▒▌▄▐ ░▄▀▄▐▒▒▒░▌▌▄▀▄▐░▌▌▒▐░▌▄▀▄░▐▒░▐▒▌░▀▄ ▀▄▀▒▒▌▒▒▄▀░▌█▐░░▐▐▀░░░▌█▐░▀▄▐▒▌▌░░░▀ ░▀▀▄▄▐▒▀▄▀░▀▄▀░░░░░░░░▀▄▀▄▀▒▌░▐ ░░░░▀▐▀▄▒▀▄░░░░░░░░▐░░░░░░▀▌▐ ░░░░░░▌▒▌▐▒▀░░░░░░░░░░░░░░▐▒▐ ░░░░░░▐░▐▒▌░░░░▄▄▀▀▀▀▄░░░░▌▒▐ ░░░░░░░▌▐▒▐▄░░░▐▒▒▒▒▒▌░░▄▀▒░▐ ░░░░░░▐░░▌▐▐▀▄░░▀▄▄▄▀░▄▀▐▒░░▐ ░░░░░░▌▌░▌▐░▌▒▀▄▄░░░░▄▌▐░▌▒░▐ ░░░░░▐▒▐░▐▐░▌▒▒▒▒▀▀▄▀▌▐░░▌▒░▌ ░░░░░▌▒▒▌▐▒▌▒▒▒▒▒▒▒▒▐▀▄▌░▐▒▒ </pre>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
نصائح و ملاحظات
إستخدم الوسم <p> في حال أردت عرض فقرة عادية في الصفحة.
و إستخدم الوسم <pre> في حال أردت عرض نص تريده أن يظهر كما هو.
