نعلم جميعًا أن العلامة <pre> يمكنها تحديد نص منسق مسبقًا، والتطبيق الشائع هو تمثيل الكود المصدري للكمبيوتر. عادةً ما يحتفظ النص الموجود في عنصر مسبق بالمسافات البيضاء والأسطر الجديدة، ولكن لسوء الحظ عندما تكتب تعليمات برمجية داخل علامة <pre>، إذا لم تقم بلف الأسطر الجديدة يدويًا، فسيتم الاحتفاظ بها أيضًا لك بدلاً من فاصل الأسطر.
في هذا الوقت، يمكنك استخدام overflow:auto؛ (عندما يتجاوز الرمز حدود الحاوية، يتم عرض مربع التمرير)، ولكن هذه الطريقة ليست مناسبة لجميع المتصفحات السائدة، وبعض المتصفحات ستقتطع المحتوى الذي تم تجاوزه مباشرة.
نظرًا لعدم وجود العديد من الأماكن التي يتم فيها استخدام كود المصدر على هذا الموقع، لم أهتم حقًا بهذه المشكلة من قبل، منذ وقت ليس ببعيد، أبلغ أحد مستخدمي الإنترنت المتحمسين عن هذه المشكلة على QQ، لذلك عندما قمت بتغيير الموضوع هذه المرة، بحثت للحصول على حل ومشاركتها.
| قبل { مسافة بيضاء: التفاف مسبق /* css-3 */ مسافة بيضاء: -moz-pre-wrap /* موزيلا، منذ عام 1999 */ مسافة بيضاء: -التفاف مسبق /* Opera 4-6 */ مسافة بيضاء: -o-pre-wrap /* Opera 7 */ التفاف الكلمات: فاصل الكلمات؛ /* إنترنت إكسبلورر 5.5+ */ } |
يمكن أن يؤدي حل CSS هذا إلى التفاف النص الموجود في العلامة المسبقة تلقائيًا، وقد قمت باختباره على جميع المتصفحات التي أستخدمها، وجميعها تدعم IE6، وIE7، وIE8، وFirefox، وOpera، وSafari، وChrome.
لا يتجاوز ذلك الحدود إلا إذا قمت بتقليص عرض النافذة إلى أقل من 20 حرفًا.