كيفية تقسيم نص كبير على مجموعة من div

الهادي عبد الله • منذ 5 سنوات

السلام عليكم ورحمة الله وبركاته

كيف حال الجميع؟

سؤالي هو كيف يمكنني عرض نص طويل في مجموعة من Div لها حجم معيّن ولها نفس Class (لأعطي لها نفس style)و تختلف في المعرّف Id (لاستخدمه في ترقيم Div)، كل هذا بطريقة دينامكية حيث حجم النص هو من يتحكم في عدد divs .

أو بعبارة أخرى كيف يمكنني عرض نص كبير على شكل ورقات لكتاب؟

كيف يمكنني فعل ذلك بـ  Jquery  أو javascript؟

كلمات دليلية: css html javascript jquery

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (1)

Abdullah Alhariri • منذ 5 سنوات

وعليكم السلام ورحمة الله

أسهل طريقة يكون بتحويل النص إلى مصفوفة بإستخدام الدالة ()split

//هذا النص الذي سيتم تحويله لمصفوفة
var content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut";

//تحويل النص لمصفوفة
var contentArray = content.split(" ");//التحويل إلى مصفوفة يتم من خلال المسافة

من خلال حلقة تكرارية نقوم بتجميع العدد المطلوب من الكلمات في متغير 

var startIndex = 0;
var endIndex = 10;
var numOfWords = 10;//متغير يمثل عدد الكلمات في الصفحة الواحدة
var divContentsArray = [];//مصفوفة يتم فيها تجميع النصوص

//دالة التجميع
var concatDivContent = function(var start,var end){
 var content = "";//متغير نجمع فيه الكلمات
 // حلقة تكرارية لتجميع الكلمات
 for(start; start < end; start++){
   content+= contentArray[start] + " ";
 }
 content = content.slice(0, content.length-1);//حذف المسافة الأخيرة
 divContentsArray.push(content);//إضافة النص المجمع إلى مصفوفة النصوص المجمعة
}

//حلقة تكرارية لتجميع الكلمات ووضعها في مصفوفة النصوص
while(startIndex < contentArray.length){
 //استدعاء دالة التجميع
 concatDivContent(startIndex ,endIndex);
 startIndex = endIndex -1;
 //التحقق من عدد الكلمات المتبقي هل هو أصغر من حجم المصفوفة أم لا
 if(endtIndex + (numOfWords - 1) < contentArray.length){
   // إذا كان أصفر
   endIndex += numOfWords
 }else{
  endIndex = contentArray.length;
 }
}

 الآن في حلقة تكرارية جديدة نقوم بإضفة ال divs الجديدة في المكان المطلوب

//حلقة تكرارية لإضافة النصوص
//إذا افترضنا أن الحاوية لجميع الصفحات يحمل المعرف container
for(var i = 0; i < divContentsArray.length; i++){
  $("#container").append('<div class="classesName" id="page_' + i +
  '">' + divContentsArray[i] + '</div>'
}

أتمنى أن أكون قد أفدتك أعتذر على الإطالة 

بالتوفيق إن شاء الله.

الهادي عبد الله: شكرا أخي على هذه اﻹجابة القيّمة وقد استفدت منها كثيرا، لكن لي مشكلة واحدة وهي أنني لا أريد تحديد حجم النص في كل div بل أريد أن أجعل ذلك برمجيا بحيث أحدد طول وعرض الـDiv وهو يستوعب ما استوعبه من النص

Abdullah Alhariri: أعتذر عن التأخر في الرد ، لا أعرف طريقة تحدد فيها عدد الكلمات بناءً على طول وعرض ال Div ولكن العكس ممكن ومع ذلك بحثت ولكن لم أجد طريقة لذلك أتمنى أن يفيدنا الأخوة إن كان أحدهم لديه طريقة ما

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !