HTML وCSS / دليل حلول تحريري
حل تجاوز Flexbox وGrid
حدد أول صندوق زائد وميز حدود المسارات والعناصر والمحتوى المتصل والتمرير المقصود.
قاعدة معرفة للقراءة فقط · بلا تعليقات عامة
تعرّف على الأعراض
تكتسب الصفحة الضيقة تمريرا أفقيا أو يرفض عنصر مرن التقلص أو يتجاوز عمودا 1fr حاويتهما. قد يخفي overflow الشريط ويترك النص والتحكم والتركيز غير متاح.
قد يظهر الفشل بعنوان طويل أو ترجمة أو صورة أو تكبير. احفظ المحتوى المحفز في المثال المصغر.
افهم الأسباب المحتملة
- قد تحتفظ العناصر والمسارات بحدود تلقائية يتأثر بها المحتوى. يفرض الرمز المتصل أو الصورة أو الابن الثابت أو قيد متداخل عرضا أكبر من المتاح.
- وقد يكون السبب حساب الصندوق؛ يزيد الحشو والحد عن content-box. تختلف معالجة سياسة التجاوز عن التحجيم.
1. حدد أول صندوق يتجاوز مالكه
أعد العرض والتكبير وافحص التراكبات والأحجام. تتبع الابن إلى العنصر والحاوية وسجل العرض والحد الأدنى والحشو والحد والأبعاد الأصلية. لا تبدأ بإخفاء التجاوز على body لأنه يزيل الدليل ويقص المحتوى. حدد الحدود بإطارات مؤقتة وسجل القواعد القليلة المنتجة للفشل.
2. أصلح حد العنصر المرن وسياسة النص
إذا احتاج النص تقلصا دون الحد التلقائي تسمح min-inline-size: 0 بذلك، ويظل النص محتاجا لكسر مقبول. يثبت المثال الشارة ويقلص المنطقة ويلف مرجعا مصطنعا. يعالج الحد والنص منفصلين. إذا لزم الاتصال فاختر تمريرا محليا ميسرا أو ترتيبا آخر. افحص الآباء؛ لا يزيل إصلاح الفقرة حد العنصر الخارجي.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex minimum repair</title>
<style>
.record { display: flex; gap: 1rem; } .badge { flex: 0 0 3rem; } .text { min-inline-size: 0; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Flexible reference</h1><div class="record"><span class="badge">A1</span><p class="text">averylongsyntheticreferencewithoutspaces01234567890123456789</p></div></main>
</body>
</html>
The long reference wraps beside the badge.تتقلص الفقرة ويلتف الرمز دون قص الشارة الثابتة. النتيجة المتوقعة: يلتف المرجع الطويل بجانب الشارة.
3. راجع قيود مسار Grid والعنصر
قد تحتفظ 1fr بحد متأثر بالمحتوى. استخدم minmax(0, 1fr) حين يسمح التصميم بذلك وعالج الأبناء أيضا. يجمع المثال الكسور مع التفاف وعمود واحد عند الضيق. إذا احتاجت البطاقة عرض قراءة أدنى فقلل الأعمدة لا تصغرها بلا حد. إنه قرار سياسة لا وصفة لكل جدول وصورة وتسمية.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid minimum repair</title>
<style>
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .grid > * { min-inline-size: 0; overflow-wrap: anywhere; } @media (max-width: 30rem) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main><h1>Grid references</h1><div class="grid"><p>averylongsyntheticreference01234567890123456789</p><p>Another record.</p></div></main>
</body>
</html>
The grid stacks when narrow and long text remains available.يتعاون المسار والالتفاف ويقدم البديل الضيق القراءة على عمودين. النتيجة المتوقعة: تتكدس الشبكة عند الضيق ويبقى النص متاحا.
4. افحص الوسائط والصناديق والتمرير المقصود
قيد الصور مع حفظ النسبة واحسب الحشو والحد. قد يحتاج الجدول تمريرا أفقيا مشروعا بشرط حفظ الخلايا وصلاحية المفاتيح والتقنيات. لا تعالج كل تجاوز بالقص. أزل التشخيص وأعد المحفز وافحص التركيز والتغطية. ليس اختفاء الشريط معيار القبول بل الوصول الكامل.
تحقق من نجاح الإصلاح
أعد الحالة بضيق واتساع وتكبير وترجمة أطول. تحقق من الالتفاف أو التمرير المقصود وغياب تجاوز الصفحة غير المقصود والوصول للتحكم. افحص الأحجام بعد التحميل.
امنع تكرار المشكلة
- ضم الرموز الطويلة والوسائط والتداخل إلى العينات، ووثق ملكية الحدود والتجاوز بدلا من قص عام للجذر.