<pre>: عنصر PRE

آخر تحديث: 2026-10-13

<pre>عنصر PRE

نص منسق مسبقًا يحافظ على المسافات وفواصل الأسطر بخط أحادي المسافة؛ مثالي للكود أو الشعر.

الفئةمحتوى النص
نموذج المحتوىمحتوى تدفقي
العناصر الأم المسموحةأي عنصر يقبل المحتوى التدفقي
وسم الإغلاقنعم — يتطلب إغلاق </pre> وسم
الحالةقياسي

📝 البنية

<pre>يحافظ على
  المسافات البادئة و
    فواصل الأسطر</pre>

▶ مثال

عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:

🌐 دعم المتصفح

المتصفح ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<pre> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
مدعوم في جميع المتصفحات الرئيسية
نصيحة: تُعرض المسافات داخل pre كما هي — تجنب المسافات البادئة الإضافية؛ غالبًا ما يُقرن بـ code.

❓ الأسئلة الشائعة

Qهل تُحفظ فواصل الأسطر والمسافات داخل pre؟
Aنعم، وهذه الوظيفة الجوهرية لـ <pre>: المسافات وفواصل الأسطر والمسافات البادئة في المصدر تظهر كما هي (يطبّق المتصفح عليه white-space: pre افتراضيًا). ولذلك انتبه في مصدر HTML الخاص بـ pre إلى كتابة المحتوى فور وسم الفتح حتى لا تدخل المسافات البادئة في العرض.
Qهل يُستحسن استخدام pre مع code معًا؟
Aالتركيب مستحسن: <pre><code>الشيفرة</code></pre> — فالـ pre يتولى حفظ التنسيق والـ code يتولى إعلان دلالة «هذا كود». وعرض pre وحده ينجح لكن قارئ الشاشة وزواحف البحث لن يعرفا أن المحتوى شيفرة.
Qالشيفرة داخل pre طويلة وتفيض، ما الحل؟
Aاضبط التمرير الأفقي بـ CSS: pre { overflow-x: auto; } — قيّد عرض الحاوية فيظهر شريط التمرير. وتجنب white-space: pre-wrap لإجبار اللف — فكسر الشيفرة في منتصفها يضر القراءة، والتمرير هو المعالجة الأصدق.
المزيد من الحالات قادمة قريبًا — ترقبوا.

📚 دروس ذات صلة

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%