عد الأسطر داخل عناصر DOM

من الممكن تحديد عدد أسطر النص داخل عنصر DOM، لكنه يتطلب بعض الاعتبار لتصميم العنصر وأبعاده.

الفواصل التلقائية في DOM

لا يتم تمثيل فواصل الأسطر التلقائية في النص بشكل مباشر في DOM نفسه. يحتوي DOM فقط على محتوى النص الخام.

خطوط العد بناءً على ارتفاع العنصر

ومع ذلك، إذا كان ارتفاع العنصر يعتمد على محتواه، فيمكنك تقدير العدد من الخطوط بقسمة الارتفاع على ارتفاع خط الخط.

var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;

تعديلات التباعد والحشو

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

مثال

يوضح الكود التالي كيفية حساب الأسطر في عنصر div مع ارتفاع سطر محدد:

  hello how are you? hello how are you? hello how are you? hello how are you?

function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight;
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: "   lines);
}

يعرض هذا الرمز تنبيهًا بعدد الأسطر في عنصر div.