من المعروف
تحدد العلامات النص المنسق مسبقًا، والتطبيق الشائع هو تمثيل الكود المصدري للكمبيوتر. عادةً ما يحتفظ النص الموجود في عنصر PRe بالمسافات وفواصل الأسطر، ولكن لسوء الحظ عندما تكتب تعليمات برمجية داخل علامة، إذا لم تقم بتغليفها يدويًا، فسوف تحافظ عليها لك دون تغيير فواصل الأسطر.
في هذا الوقت، يمكنك استخدام overflow:auto؛ (عندما يتجاوز الرمز حدود الحاوية، يتم عرض مربع التمرير)، ولكن هذه الطريقة ليست مناسبة لجميع المتصفحات السائدة، وبعض المتصفحات ستقتطع المحتوى الذي تم تجاوزه مباشرة.
نظرًا لعدم وجود العديد من الأماكن التي يتم فيها استخدام كود المصدر على هذا الموقع، لم أهتم حقًا بهذه المشكلة من قبل، منذ وقت ليس ببعيد، أبلغ أحد مستخدمي الإنترنت المتحمسين عن هذه المشكلة على QQ، لذلك عندما قمت بتغيير الموضوع هذه المرة، بحثت للحصول على حل ومشاركتها.
pre { مسافة بيضاء: التفاف مسبق؛ 6 */ مسافة بيضاء: -o-pre-wrap; /* Opera 7 */ Word-wrap:break-word; أي
يمكن لحل CSS هذا أن يجعل النص الموجود في العلامة المسبقة يلتف تلقائيًا، وقد قمت باختباره على جميع المتصفحات التي أستخدمها، وجميعها تدعم IE6، وIE7، وIE8، وFirefox، وOpera، وSafari، وChrome.
فقط عندما تقوم بتقليص عرض النافذة إلى أقل من 20 حرفًا، ستتجاوز الحدود. بالإضافة إلى ذلك، رأيت بعض المنشورات التي تشارك تقنية CSS هذه، قائلة إنها يمكن أن تحل مشكلة التفاف الأسطر للكلمات الطويلة، لكنني جربتها ونجحت. ما زال لا يعمل.
-