pre-line وpre-wrap: احتفظ بفواصل الأسطر واختر مصير المسافات

الخلاصة السريعة

ابدأ بنص واحد

أسند النص نفسه باستخدام textContent إلى عنصري المقارنة. [3]

ضع HTML، ثم ضع JavaScript بعده داخل script. يتضمن النص أربع مسافات بين موعد والقراءة وفاصل سطر بعدها. الإسناد ينشئ محتوى نصيًا؛ لا نُدخل وسومًا لتقسيم السطر. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

<div id="lines" dir="rtl"></div>
<div id="spaces" dir="rtl"></div>

مرّر الشيفرة أفقيًا عند الحاجة.

const note = "موعد    القراءة\nأحضر دفتر الملاحظات";
const lines = document.getElementById("lines");
const spaces = document.getElementById("spaces");
lines.textContent = note;
spaces.textContent = note;

ادمج المسافات

تدمج pre-line المسافات العادية المتتابعة مع الحفاظ على فاصل السطر. [1]

أضف CSS التالي. في الصندوق الأول تضيق الفجوة بين موعد والقراءة؛ وتبدأ أحضر بعد الفاصل الصريح. إبقاء الفاصل لا يعني إبقاء كل مسافة. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

#lines, #spaces {
  width: 220px;
  font: 20px/1.6 sans-serif;
  border: 1px solid #777;
  margin-block: 12px;
}
#lines { white-space: pre-line; }
#spaces { white-space: pre-wrap; }

احتفظ بالفجوة

تحافظ pre-wrap على المسافات العادية المتتابعة وفاصل السطر معًا. [2]

قارن الصندوقين عند العرض نفسه: تتسع فجوة الثاني لأنه يحتفظ بالمسافات الأربع. ويمكن للنص الالتفاف عند ضيق العرض؛ الفاصل المكتوب ليس موضع الانقسام الوحيد. [2]

افصل شكل العرض عن النص

تغيّر white-space العرض؛ تبقى بيانات النص في المستند كما هي. [2]

نفّذ المقارنتين بعد الإسناد. تظهر true في الحالتين رغم اختلاف الفجوة المرئية؛ تقرأ textContent النص، لا شكل السطور على الشاشة. [2] [3]

جرّب عرضًا أضيق، مثل 100px. هذه العينة لمسافات داخل السطر وفاصل LF؛ لا تختبر مسافات النهاية أو التبويب. معالجة كلمة طويلة بلا فرص التفاف تحتاج قرارًا إضافيًا. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

console.log(lines.textContent === note);
console.log(spaces.textContent === note);
// true, true