متى أستخدم بدلًا من ؟

استخدم عندما يكون كسر السطر جزءًا من المحتوى نفسه، كما في العنوان البريدي أو القصيدة. استخدم عناصر منفصلة للفقرات المنفصلة، وهامش CSS للتباعد، بدلًا من تكديس وسوم .

وثائق HTML قابلة للتشغيل: سطر جديد في HTML

Q: كيف أضيف سطرًا جديدًا في HTML؟

ضع حيث يجب أن يبدأ السطر الجديد: Line one Line two. الضغط على Enter في ملف HTML لا يفيد، لأن المتصفحات تعامل الأسطر الجديدة في الشيفرة كمسافات عادية.

Q: هل أكتب أم أم ؟

الثلاثة تعمل في HTML وتنتج العنصر نفسه. هي صيغة HTML العادية، والصيغ ذات الشرطة المائلة مقبولة للتوافق مع XHTML وJSX. أما وحده فغير صالح، مع أن المتصفحات تقرؤه كسطر جديد آخر.

Q: كيف أحافظ على أسطر النص من دون إضافة وسوم ؟

أعطِ العنصر white-space: pre-line في CSS. عندها يعرض المتصفح كل سطر جديد في النص ككسر سطر، مع دمج المسافات الزائدة. هذا مفيد لتعليقات المستخدمين والنصوص المحمّلة بـ JavaScript.

Q: كيف أمنع كسر السطر في HTML؟

ضع النص داخل عنصر يحمل white-space: nowrap، أو اربط كلمتين بمسافة غير قابلة للكسر كي تبقيا دائمًا في السطر نفسه.

سطر جديد في HTML: وسم br والأسطر ونقاط الكسر

استخدم لبدء سطر جديد داخل كتلة نص. تعلّم متى يكون مناسبًا ومتى تكون الفقرة أفضل، وكيف تحافظ على الأسطر الموجودة في نصك، وكيف تسمح بكسر الكلمات الطويلة بـ ، وكيف تمنع السطر من الانكسار.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تضيف سطرًا جديدًا

ضع   حيث تريد أن يبدأ السطر الجديد. هو عنصر فارغ، لذلك لا يوجد وسم إغلاق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

ينكسر العنوان البريدي بالضبط عند كل  . أما الفقرة الثانية فتبقى في سطر واحد رغم وجود سطر جديد في الشيفرة: يعامل HTML الأسطر الجديدة ومسافات الجدولة وتتابع المسافات كمسافة واحدة. ولهذا وُجد  .

  و  و  تنتج كلها العنصر نفسه. استخدم ما يعتمده مشروعك (JSX وXHTML يشترطان الشرطة المائلة).

br أم p: الكسر ليس تباعدًا

  ينهي سطرًا داخل الفقرة نفسها. و جديد يبدأ فقرة جديدة، مع مسافة فوقها وتحتها من الهوامش الافتراضية. تكديس وسوم   لصنع مسافة يعمل، لكنه هش ويعبّر عن معنى خاطئ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

الصندوقان متشابهان في الشكل، لكن الأول فقرة واحدة بالنسبة لقارئ الشاشة، وتغيير التباعد فيه يعني تعديل كل صفحة. في الثاني، الفجوة سطر CSS واحد.

الاستخدامات الجيدة لـ  : العناوين البريدية، والقصائد وكلمات الأغاني، وأسطر التوقيع، حيث يكون الكسر جزءًا من النص. لكل ما عدا ذلك استخدم الفقرات أو القوائم أو العناوين.

الحفاظ على الأسطر الموجودة في نصك

عندما يأتي النص من مصدر آخر (صندوق تعليقات، قاعدة بيانات، سكربت)، فإنه يحتوي على محارف سطر جديد حقيقية بدلًا من وسوم  . خاصية CSS white-space: pre-line تجعل المتصفح يعرض تلك الأسطر ككسور أسطر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

النص نفسه يظهر في سطر واحد في الصندوق الرمادي وفي ثلاثة أسطر في الأزرق. وهذا أيضًا أكثر أمانًا من بناء وسوم   داخل نص المستخدم عبر innerHTML، الذي يسمح للمستخدمين بحقن HTML. للحفاظ على المسافات والإزاحة أيضًا استخدم white-space: pre، وتشرحها صفحة المسافة في HTML.

السماح بكسر الكلمات الطويلة: wbr

الكلمة أو الرابط الطويل بلا مسافات قد يتجاوز صندوقًا ضيقًا.  يحدد موضعًا يمكن للمتصفح أن يكسر السطر عنده إن احتاج، ولا يفعل شيئًا في غير ذلك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

المسار الأول يخرج من صندوقه، والثاني ينكسر عند نقاط . للنصوص التي لا تتحكم بها، تكسر خاصية CSS overflow-wrap: anywhere الكلمات الطويلة في أي موضع بدلًا من ذلك.

منع السطر من الانكسار

أحيانًا تريد العكس: إبقاء «10 km» أو رقم هاتف معًا. هناك أداتان:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  مسافة لا يكسر المتصفح السطر عندها، فيبقى «10» و«km» معًا. وwhite-space: nowrap يُبقي span كاملًا في سطر واحد. استبدل   بمسافة عادية، أو احذف class، وسينقسم كلاهما على سطرين عند هذا العرض.

أخطاء شائعة

الضغط على Enter في الشيفرة وتوقع سطر جديد. الأسطر الجديدة في HTML مسافات. استخدم   أو عناصر منفصلة أو white-space: pre-line.
تكديس   للتباعد. استخدم الفقرات وmargin.
استخدام   لبناء قائمة. استخدم <ul> أو <ol> مع <li>، وتعلن عنها قارئات الشاشة كقائمة.
كتابة . غير صالح. اكتب  .
إضافة   إلى نص المستخدم عبر innerHTML. اضبط textContent واستخدم white-space: pre-line بدلًا من ذلك.

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

كيف أضيف سطرًا جديدًا في HTML؟

ضع   حيث يجب أن يبدأ السطر الجديد: Line one Line two. الضغط على Enter في ملف HTML لا يفيد، لأن المتصفحات تعامل الأسطر الجديدة في الشيفرة كمسافات عادية.

هل أكتب أم أم ؟

الثلاثة تعمل في HTML وتنتج العنصر نفسه.   هي صيغة HTML العادية، والصيغ ذات الشرطة المائلة مقبولة للتوافق مع XHTML وJSX. أما  وحده فغير صالح، مع أن المتصفحات تقرؤه كسطر جديد آخر.

متى أستخدم بدلًا من ؟

استخدم   عندما يكون كسر السطر جزءًا من المحتوى نفسه، كما في العنوان البريدي أو القصيدة. استخدم عناصر  منفصلة للفقرات المنفصلة، وهامش CSS للتباعد، بدلًا من تكديس وسوم  .

كيف أحافظ على أسطر النص من دون إضافة وسوم ؟

أعطِ العنصر white-space: pre-line في CSS. عندها يعرض المتصفح كل سطر جديد في النص ككسر سطر، مع دمج المسافات الزائدة. هذا مفيد لتعليقات المستخدمين والنصوص المحمّلة بـ JavaScript.

كيف أمنع كسر السطر في HTML؟

ضع النص داخل عنصر يحمل white-space: nowrap، أو اربط كلمتين بمسافة غير قابلة للكسر   كي تبقيا دائمًا في السطر نفسه.

مفاهيم ذات صلة