يتحكم CSS في التفاف النص

1. أنت تقوم بتعيين عرض الجدول، أي إعطاء الجدول قيمة عرض (قيمة رقمية، وليس نسبة مئوية)
2. فرض عدم فواصل الأسطر

شعبة {
// مسافة بيضاء: لا يوجد التفاف سطر؛ يفرض nowrap عرض النص بالكامل على نفس السطر حتى ينتهي النص أو تتم مواجهة كائن br
مسافة بيضاء:nowrap }

التفاف الخط التلقائي

شعبة {
التفاف الكلمة: كسر الكلمة؛

// فاصل الكلمات يعين فواصل الأسطر الإجبارية؛ قواعد النص العادية للغات الآسيوية وغير الآسيوية، مما يسمح بفواصل الأسطر داخل الكلمات
فاصل الكلمات: عادي؛
}

فرض فواصل الأسطر للكلمات الإنجليزية

شعبة {
فاصل الكلمات: فاصل الكل؛
}

3. باختصار، طالما تم تعريف الجمل التالية في CSS، يمكن ضمان عدم فتح صفحة الويب مرة أخرى.

الجدول {تخطيط الجدول: ثابت؛}
td (فاصل الكلمات: كسر الكل؛ التفاف الكلمات: كسر الكلمة؛)

ملحوظة:

1. الجدول الأول {تخطيط الجدول: ثابت؛}، هذا النمط يمكن أن يجعل الجدول يلتف تلقائيًا عند وجود أحرف مثل !!!

2.td{word-break:break-all}، لا بأس عمومًا من استخدام هذه الجملة، ولكن في بعض الحالات الخاصة ستظل متقطعة، لذلك تحتاج إلى إضافة الجملة التالية (word-wrap:break-word;) يمكن حلها. يسمح هذا النمط بالتفاف بعض الكلمات الإنجليزية المتتالية في الجدول تلقائيًا.
(1) القواعد:

فاصل الكلمات: عادي | فاصل الكل |

المعلمة:

عادي: السماح بفواصل الأسطر داخل الكلمات وفقًا لقواعد النص للغات الآسيوية وغير الآسيوية
كسر الكل : السلوك هو نفس السلوك الطبيعي للغات الآسيوية. يُسمح أيضًا بالفواصل داخل أي كلمة في سطر نص بلغة غير آسيوية. هذه القيمة مناسبة للنص الآسيوي الذي يحتوي على بعض النصوص غير الآسيوية
إبقاء الكل: كما هو معتاد لجميع اللغات غير الآسيوية. بالنسبة للصينية والكورية واليابانية، لا يُسمح بفواصل الكلمات. مناسب للنص غير الآسيوي الذي يحتوي على كمية صغيرة من النص الآسيوي

(2) القواعد:

التفاف الكلمة: عادي | فاصل الكلمة

المعلمة:

عادي: السماح للمحتوى بالدفع خارج حدود الحاوية المحددة
كلمة فاصلة: سيتم كسر المحتوى داخل الحدود. إذا لزم الأمر، يمكن أن تحدث فواصل الكلمات أيضًا

يوضح:

يقوم بتعيين أو استرداد ما إذا كان سيتم قطع السطر عندما يتجاوز السطر الحالي حدود الحاوية المحددة.
ميزة البرنامج النصي المقابلة هي التفاف الكلمات. يرجى الاطلاع على الكتب الأخرى التي كتبتها.
(3) القواعد:

تخطيط الجدول: تلقائي | ثابت

المعلمة:

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

يوضح:
كيفية جعل الجدول يلتف تلقائيا؟
يقوم بتعيين أو استرداد خوارزمية تخطيط الجدول.
سمة البرنامج النصي المقابلة هي tableLayout.

4. وفقًا لمعظم المقالات الموجودة على الإنترنت، أضف فقط:
شفرة
............

شفرة:
الجدول {<br />
تخطيط الجدول:ثابت;فاصل الكلمات:فاصل الكل;التفاف الكلمات:فاصل الكلمة;<br />
div {كسر الكلمة: كسر الكل؛ التفاف الكلمة: كسر الكلمة؛}
هذا يمكن أن يحل مشكلة الجداول والطبقات المكسورة، وهذا ما فعلته في البداية. ومع ذلك، فإن مثل هذا الرمز سوف يسبب مشكلة، ستجد أن جميع الكلمات الإنجليزية مقطوعة، وهو ما لا يتماشى مع عادات الكتابة باللغة الإنجليزية ولا يفضي إلى القراءة.

لاحقًا، وجدت أنه من خلال إعادة كتابة الكود أعلاه، يمكنني منع الجداول/الطبقات من الانكسار والكلمات من الانكسار.
على النحو التالي:
شفرة

شفرة:
طاولة {
تخطيط الجدول: ثابت؛
التفاف الكلمة: كسر الكلمة؛
}
شعبة {
التفاف الكلمة: كسر الكلمة؛
}

وهذا أيضًا هو الرمز الذي أستخدمه الآن.