كيفية تغيير التفاف النص الافتراضي مع HTML و CSS

على عكس الورق ، يمكن لصفحات الويب تقريبا بلا حدود تمديد جانبية. بقدر ما هو مثير للإعجاب ، فهو ليس شيئًا نحتاجه حقًا أثناء القراءة. التفاف المتصفحات النص اعتمادا على عرض الحاوية النص و ال عرض الشاشة حتى نتمكن من رؤية النص بالكامل دون الحاجة إلى التمرير جانبيًا كثيرًا (فقط لأسفل).

يلف هو شيء تفعله المتصفحات مع مراعاة العديد من العوامل ، مثل لغة النص أو موضع علامات الترقيم والمسافات لا تدفع فقط لأسفل ما لا يصلح في المربع المحدد لمحتوى النص.

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

متى لتغيير التفاف النص الافتراضي

هذا كل شيء عظيم ، وتقديرا كبيرا. ولكن ، يمكن أن ينتهي بنا المطاف بسهولة في الحالات التي يكون فيها سلوك المتصفح الافتراضي ليس هو ما نبحث عنه. يمكن أن يكون عنوان ذلك لا ينبغي أن تكون ملفوفة أو كلمة في فقرة ذلك أفضل أن تكون مكسورة من النزول خط, ترك مساحة فارغة غريبة المظهر في نهاية السطر.

قد يحدث أيضا أننا فقط يائسة بحاجة إلى تلك المساحات المحفوظة في نصنا, ومع ذلك يحتفظ المتصفح بدمجها في واحد ، مما يجبرنا على إضافة متعددة في شفرة المصدر.

التفاف تفضيلات قد أيضا تغيير مع اللغة والغرض من النص. ليس بالضرورة أن يتم تغليف مقال إخباري ماندرين وقصيدة فرنسية بالطريقة نفسها بالضبط.

هناك عدد لا بأس به من خصائص CSS (وعناصر HTML!) التي يمكنها ذلك السيطرة على التفاف ونقاط التوقف و أيضا تحديد كيفية معالجة المسافات وفواصل الأسطر قبل الالتفاف.

فرص التفاف لينة وفواصل التفاف لينة

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

أبسط طريقة ل فرض استراحة إضافية يمكن القيام به عن طريق استخدام القديم الجيد
جزء.

بيضاء

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

ومع ذلك ، فإن أبيض الفضاء الخاصية هي أكثر من مجرد التفاف. بادئ ذي بدء ، ما هي المسافة البيضاء؟ انه مجموعة من الشخصيات الفضاء. كل مساحة في المجموعة يختلف عن بعضها البعض في الطول ، الاتجاه ، أو كليهما.

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

كما ذكرت في البداية ، المتصفحات انهيار مساحات متعددة (سواء الأفقي والرأسي) في المصدر في مساحة واحدة. هم ايضا النظر في هذه الأحرف الفضاء للالتفاف الفرص (الأماكن التي يمكن لف النص فيها) عند الحاجة إلى التفاف.

وهذا هو بالضبط إجراءات المتصفح التي يمكننا التحكم بها أبيض الفضاء. نلاحظ أن أبيض الفضاء الملكية لا تؤثر على جميع أنواع الفضاء, فقط الأكثر شيوعا مثل المساحة الفردية الأفقية العادية ، ومساحة علامة التبويب ، وتغذية الخط.

أدناه ، يمكنك مشاهدة لقطة شاشة لنص عينة ملفوفة بواسطة المتصفح لتناسب داخل الحاوية الخاصة به. يحدث تجاوز السعة في أسفل الحاوية ويتم تلوين النص الفائض بشكل مختلف. ستلاحظ انهيار المساحات المتتالية في الكود.

 
 ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا أ¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. 

 .textContainer width: 500px؛ الارتفاع: 320 بكسل ؛  

بعد التقديم الفضاء الأبيض: nowrap. القاعدة ، يتغير التفاف النص بالطريقة التالية:

 .textContainer / * ... * / white-space: nowrap؛  

ال قبل قيمة ال أبيض الفضاء يحافظ على جميع المسافات البيضاء و يمنع التفاف النص:

 .textContainer / *… * / white-space: pre؛  

ال ما قبل الختامية قيمة ال أبيض الفضاء يحافظ على جميع المسافات البيضاء و يلف النص:

 .textContainer / * ... * / white-space: pre-wrap؛  

وأخيرا، فإن قبل خط قيمة ال أبيض الفضاء يحافظ على المسافات البيضاء العمودية مثل خطوط جديدة و يلف النص:

 .textContainer / *… * / white-space: pre-line؛  

فواصل الكلمة

خاصية CSS مهمة أخرى يجب أن تعرفها للتحكم في التفاف النص كلمة كسر. يمكنك أن ترى في جميع لقطات أعلاه أن المتصفح ملفوفة النص قبل الكلمة “مرحبا” على الجانب الأيمن ، وبعده تجاوز النص. المتصفح لم يكسر الكلمة.

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

 .textContainer / * ... * / word-break: break-all؛  

ال كلمة كسر الخاصية لها قيمة ثالثة إلى جانب حطم الكل و عادي (ينتمون إلى كسر السطر الافتراضي). ال احتفظ بها جميعا القيمة لا يسمح كسر الكلمات.

قد لا تتمكن من رؤية تأثير احتفظ بها جميعا باللغة الإنجليزية. ولكن ، في اللغات التي توجد فيها الحروف في كلمة واحدة وحدات ذات معنى من تلقاء نفسها, قد يكسر المتصفح الكلمات عند الالتفاف ، ويمكن منع ذلك باستخدام احتفظ بها جميعا.

على سبيل المثال ، فإن الحروف في الكلمات الكورية, كسر في البداية للالتفاف, يتم الاحتفاظ معا عندما المساحة البيضاء: الحفاظ على جميع ؛ تم تحديد القاعدة.

ا¬Â  ؟؟¸اªا³Â ؟؟ à «Â¥ا¼ Ã-Â-Â¥Ã-  ؟؟ ؟؟ ««  ؟؟  ؟؟ à à ؟؟  ؟؟ ، ì ؟؟  à «Â ؟؟  ؟؟ ìا½؟ à «Â  ؟؟ ؟؟ ë ¡ا؟؟ à Â-؟؟  à ؟؟¬Â ؟؟ Â-ì  ؟؟ ؟؟ ì  ؟؟¤. ا¬Ã  ؟؟ 10Ã- ؟؟  ؟؟ ا¬Â ؟؟  à «Â ؟؟  ؟؟ ìا½Â ؟؟ à «Â  ؟؟ ؟؟ اªاµÂ-ì  ؟؟ à Â-؟؟  à ؟؟¬Â  ؟؟ ؟؟ ê °  ؟؟ 1997 م «Â ... Â؟ 3A¬Â  ؟؟ ؟؟ 10A¬Â  ؟؟¼Ã «Â¶Â ؟؟ Ã- ؟؟ 12 ° 12ì  ؟؟¼اªا¹Â à ؟؟¬ا§ا؟؟ ««  ؟؟  ... ì  ؟؟¼ا¬Â  ؟؟ ؟؟ à «Â§Â à ؟؟¬Â  ؟؟¸ا¬ا¦Â à ؟؟¬Â- à ؟؟¬Â  ؟؟ ؟؟ ا¬Â-´à «Â¦ا½Ã «Â  ؟؟ ؟؟ ë   ؟؟¤. ا¬ا§Â à ؟؟ªا¸ا؟؟ à «Â ؟؟  ± ë ¡ à ؟؟-  ؟؟ ؟؟ ì ؟؟ Â-ì  ؟؟ ؟؟ ì  ؟؟¤. ا¬Â  ؟؟´ à Â-؟؟  à ؟؟¬Â  ؟؟ ؟؟ ìÂ- à ؟؟¬Â  ؟؟ ؟؟ à «Â  ؟؟ ؟؟ ا¬Â- ... êا³ا؟؟ ا¬Â  ؟؟ à «Â °  ؟؟ ì  ؟؟ ؟؟ ا¬Â  ؟؟ à «Â¬ا¸اªÂ °  ؟؟ à «Â  ؟؟¤ا¬Â  ؟؟´ Ã-  ؟؟¨اªÂ »Â ؟؟ à «Âªا¨ا¬Â-¬ à «Â  ؟؟¤ا¬Â  ؟؟ ؟؟ êا³ا¼ اªÂ °  à ؟؟¬Â  ؟؟ ؟؟ à «Â¶Â à ؟؟¬Â  ؟؟¼Ã «Â¥ا¼ à «Â  ؟؟¤Â à «Â £¹Ã «Â  ؟؟ ؟؟ ë   ؟؟¤.

 .textContainer / * ... * / word-break: keep-all؛  

هذه الخاصية قد تدعم قيمة أخرى تسمى كسر كلمة فى المستقبل. سترى كيف كسر كلمة يعمل لاحقا ، في “التفاف الفائض” قسم من هذا المقال.

فرص كسر كلمة

يمكن للمطورين أيضا إضافة فرص التفاف داخل الكلمات, باستخدام عنصر HTML. إذا احتاج المستعرض إلى التفاف سلسلة نصية ، فسوف ينظر في المكان موجود لفرصة التفاف.

 
 ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ Hello â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. ا¢Â  ؟؟ ؟؟ مرحبا. 
 

 .textContainer / * ... * / white-space: pre-wrap؛  

بدون , الكل “مرحبا” الكلمة قد تم تقديمها في سطر جديد. بإضافة إلى رمز HTML ، أبلغنا المتصفح ذلك لا بأس في كسر الكلمة في تلك المرحلة للالتفاف, في حال كان ذلك ضروريا.

الواصلات

ال الواصلات خاصية CSS هي طريقة أخرى للسيطرة على فواصل بين الحروف في كلمة واحدة. لدينا مقالة منفصلة عن الواصلة CSS إذا كنت مهتمًا. باختصار ، الخاصية تسمح لك خلق فرص التفاف من خلال الواصلة.

انها تلقاءي قيمة يطالب المتصفح ل الواصلة تلقائيا وكسر الكلمات عند الحاجة بينما التفاف. ال كتيب قيمة القوات المتصفحات ل التفاف (إذا لزم الأمر) في فرص الواصلة المضافة من قبلنا, مثل شخصية الواصلة (‐) أو ­ (واصلة ناعمة). إذا لا شيء أعطيت كقيمة سيكون هناك لا التفاف القيام به بالقرب من الواصلات.

 
 الدفيئة الدفيئة الدفيئة الدفيئة الدفيئة الدفيئة 
 

 .textContainer / *… * / -webkit-hypnens: auto؛ -ms-الواصلات: السيارات ؛ الواصلات: السيارات ؛  

التفاف الفائض

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

لاحظ أن تجاوز الختامية ومن المعروف أيضا باسم كلمة ختامية (هم الأسماء المستعارة).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: break-word؛  

مع عدم وجود مسافة بين الحروف الموجودة في كود HTML أعلاه (على سبيل المثال لا توجد فرص التفاف) ، لم يتم التفاف النص في البداية و تم حفظه ككلمة واحدة.

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