تسرد هذه المقالة أنماط CSS الموصى بها لفواصل الأسطر المتوافقة مع IE وFF، وتشرح بالتفصيل الاختلافات بين التفاف الكلمات وفواصل الكلمات.
يوصى باستخدام أسلوب CSS لكسر الأسطر المتوافق مع IE وFF
أفضل طريقة هي
التفاف الكلمة: كسر الكلمة: مخفي؛
بدلاً من
التفاف الكلمات: فاصل الكلمات؛
لا
التفاف الكلمة: كسر الكلمة: تلقائي؛
لا توجد مشكلة في IE، ولكن في ظل FF، سيتم حظر السلاسل الإنجليزية الطويلة خارج المحتوى.
الفرق بين التفاف الكلمات وكسر الكلمات
وفيما يلي المحتوى المقتبس:
التفاف الكلمة: عادي المحتوى يتجاوز حدود الحاوية الخاصة به. يلتف محتوى فاصل الكلمة إلى السطر التالي، ويتم تشغيل فاصل الكلمات عند الضرورة. فاصل الكلمات: عادي افتراضي يسمح بفصل الأسطر داخل الكلمات ويبدو أنه يعمل فقط مع النص الآسيوي. Break-all يتصرف بنفس الطريقة المعتادة بالنسبة للنص الآسيوي، ولكنه يسمح للسطر بالانفصال عشوائيًا بالنسبة للنص غير الآسيوي. هذه القيمة مناسبة للنص الآسيوي الذي يحتوي على بعض المقتطفات من النص غير الآسيوي. keep-all لا يسمح بفصل الكلمات للغة الصينية واليابانية والكورية، ويعمل بنفس الطريقة المعتادة لجميع اللغات غير الآسيوية. |
الملخص هو كما يلي:
يتحكم التفاف الكلمات في التفاف الخط.
عند استخدام كلمة الفاصل، سيتم فرض فواصل الأسطر. لا توجد مشكلة مع اللغة الصينية، ولا توجد مشكلة مع الجمل الإنجليزية. لكن بالنسبة للسلاسل الطويلة من اللغة الإنجليزية، فهذا لا يعمل.
يتحكم فصل الكلمات في كسر الكلمات.
الوضع الافتراضي هو الوضع الطبيعي، ولا يتم تقسيم الكلمات الإنجليزية.
كسر كل شيء هو كلمة كسر. عندما تصل الكلمة إلى الحد، ينتقل الحرف التالي تلقائيًا إلى السطر التالي. يحل بشكل أساسي مشكلة السلاسل الإنجليزية الطويلة.
يشير Keep-all إلى الكلمات الصينية واليابانية والكورية المستمرة. وهذا يعني أنه إذا استخدمت هذه المرة فقط دون التفاف الكلمات، فلن يلتف الصينيون. (الجمل الإنجليزية عادية.)
أي تحت:
باستخدام word-wrap:break-word؛ كل شيء يعمل بشكل جيد.
وما يليها:
إذا لم تستخدم هذين، فلن تكون هناك أي مشاكل مع اللغة الصينية. لن تكون هناك مشكلة مع الجمل الإنجليزية أيضًا. ومع ذلك، يمكن للسلاسل الطويلة في اللغة الإنجليزية أن تسبب مشاكل.
من أجل حل سلاسل طويلة من اللغة الإنجليزية، يتم استخدام Word-wrap:break-word;word-break:break-all; ومع ذلك، ستؤدي هذه الطريقة إلى قطع اتصال الكلمات الموجودة في الجمل الإنجليزية العادية (وينطبق الشيء نفسه على ie).
المشكلة الرئيسية موجودة حاليًا في سلاسل طويلة من الكلمات الإنجليزية والإنجليزية التي يتم فصلها. في الواقع، السلسلة الطويلة في اللغة الإنجليزية هي مجرد كلمة طويلة نسبيًا.
بمعنى هل يجب فصل الكلمات الإنجليزية؟ المشكلة واضحة ومن الواضح أنه لا ينبغي قطع الاتصال.
بالنسبة للسلاسل الطويلة باللغة الإنجليزية، فهي ضارة، لذا بالطبع لا داعي للقلق بشأنها. ومع ذلك، يجب علينا أيضًا التفكير في بعض الطرق لمنعه من توسيع الحاوية.
الاستخدام: overflow:auto؛ أي أن السلاسل الطويلة ستلتف تلقائيًا. وما يليها، سيتم تغطية سلاسل طويلة.
لذا، لتلخيص ذلك، فإن أفضل طريقة هي التفاف الكلمات:فاصل الكلمات؛تجاوز:مخفي بدلاً من التفاف الكلمات:فاصل الكلمات؛فاصل الكلمات:فاصل الكل؛.
word-wrap:break-word;overflow:auto; لا توجد مشكلة في IE. ضمن ff، سيتم حجب السلاسل الطويلة جزئيًا.
بالإضافة إلى ذلك، رمز الاختبار هو كما يلي:
وفيما يلي المحتوى المقتبس:
1.htm=============================================================================== ============================================================================== <نمط> .c1{ العرض: 300 بكسل الحدود: 1 بكسل أحمر خالص} .c2{ العرض: 300 بكسل؛ التفاف الكلمات: حدود الكلمة: 1 بكسل أصفر خالص} .c3{ العرض: 300 بكسل؛ التفاف الكلمات: فاصل الكلمة؛ فاصل الكلمات: فاصل الكل؛ الحدود: 1 بكسل أخضر خالص} .c4{ العرض: 300 بكسل؛ التفاف الكلمات: كسر الكلمة؛ فاصل الكلمات: الاحتفاظ بالكل؛ الحدود: 1 بكسل أزرق خالص} .c5{ العرض: 300 بكسل؛ فاصل الكلمات: كسر الكل؛ الحدود: 1 بكسل أسود خالص} .c6{ العرض: 300 بكسل؛ فاصل الكلمات: الاحتفاظ بالجميع؛ الحدود: 1 بكسل أحمر خالص} .c7{ العرض: 300 بكسل؛ التفاف الكلمات: كسر الكلمة؛ الفائض: الحدود: 1 بكسل أصفر خالص} </نمط> .c1{ العرض: 300 بكسل الحدود: 1 بكسل أحمر خالص} <div class="c1"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c1> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c1> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c1> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c2{ العرض: 300 بكسل؛ التفاف الكلمات: حدود الكلمة: 1 بكسل أصفر خالص} <div class="c2"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c2> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c2> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c2> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c3{ العرض: 300 بكسل؛ التفاف الكلمات: فاصل الكلمة؛ فاصل الكلمات: فاصل الكل؛ الحدود: 1 بكسل أخضر خالص} <div class="c3"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c3> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c3> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c3> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c4{ العرض: 300 بكسل؛ التفاف الكلمات: كسر الكلمة؛ فاصل الكلمات: الاحتفاظ بالكل؛ الحدود: 1 بكسل أزرق خالص} <div class="c4"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div class=c4> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div class=c4> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div class=c4> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c5{ العرض: 300 بكسل؛ فاصل الكلمات: كسر الكل؛ الحدود: 1 بكسل أسود خالص} <div class="c5"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c5> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c5> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c5> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c6{ العرض: 300 بكسل؛ فاصل الكلمات: الاحتفاظ بالجميع؛ الحدود: 1 بكسل أحمر خالص} <div class="c6"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c6> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c6> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c6> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> <ر> .c7{ العرض: 300 بكسل؛ التفاف الكلمات: كسر الكلمة؛ الفائض: الحدود: 1 بكسل أصفر خالص} <div class="c7"> سافجاسكفلاسجفكلساجفكلاسجفلكساجمفلكسجفلكاسجفكسافج </div> <div الفئة=c7> هذا كله إنجليزي، هذا كله إنجليزي. </div> <div الفئة=c7> كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. كل ذلك باللغة الصينية. </div> <div الفئة=c7> ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية ترتيب مختلط من الصينية والإنجليزية. الصينية والإنجليزية. </div> |