التفاف الحروف Css إلى سطر جديد. واصلة الكلمات. قم بتشغيل الواصلة للكلمات التي لا تناسبها

وصف

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

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

بناء الجملة
مسافة بيضاء: عادي |  ناراب |  قبل |  الخط المسبق |  قبل التفاف |  يرث
القيم
يتم عرض النص العادي في نافذة المتصفح كالمعتاد ، ويتم تعيين فواصل الأسطر تلقائيًا.  يتم تجاهل المسافة البيضاء الآن ، ويتم تجاهل فواصل الأسطر في كود HTML ، ويتم عرض كل النص في سطر واحد ؛  ومع ذلك ، إضافة علامة 
التفاف النص إلى سطر جديد.  pre يظهر النص متضمنًا جميع المسافات والواصلات كما أضافها المطور في كود HTML.  إذا كان الخط طويلاً جدًا بحيث لا يمكن احتواؤه في نافذة المتصفح ، فسيتم إضافة شريط تمرير أفقي.  لا يتم أخذ مسافات ما قبل السطر في الاعتبار في النص ، يتم التفاف النص تلقائيًا في السطر التالي إذا لم يكن مناسبًا للمنطقة المحددة.  يتم الاحتفاظ بكل المسافات والفواصل في النص ، ومع ذلك ، إذا كان عرض الخط لا يتناسب مع المنطقة المحددة ، فسوف يلتف النص تلقائيًا إلى السطر التالي.  يرث يرث القيمة من الأصل. 
يتم عرض تأثير القيم على النص في الجدول.  واحد.
HTML5 CSS2.1 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 
مثال
 

 
 
 نظرية فيرما الأخيرة

 X ن+ ص ن= Z ن
حيث n عدد صحيح> 2
 
 
 

تظهر نتيجة هذا المثال في الشكل.  واحد.
أرز.  1. تطبيق خاصية المساحة البيضاء
نموذج الكائن
document.getElementById ("elementID") .style.whiteSpace
المتصفحات
Internet Explorer حتى الإصدار 7.0 ويتضمن ذلك لا يدعم الخط المسبق والالتفاف المسبق والوراثة.  ل </p>
<p>لا يدعم Opera السابق للإصدار 9.5 قيمة الخط المسبق.  ل <textarea>تتصرف القيم العادية والقيم الأولية مثل ما قبل الالتفاف ، وتتصرف قيمة nowrap مثل السطر الأولي.</p>
<p>لا يدعم Safari قبل الإصدار 3.0 و iOS قيم الالتفاف المسبق والخط المسبق.</p>
<p>لا يدعم Firefox حتى الإصدار 2.0 ويتضمن قيمًا ما قبل الخط والتفاف.  ل <textarea>يتم تفسير القيم العادية و nowrap و pre على أنها التفاف أولي.</p>
<p>تحديد كيفية التفاف الكلمات الطويلة:</p><ol><li>فقط في حالة وجود شرطة أو مسافة أو إدخال (باستثناء مسافة غير منقسمة وواصلة غير منقسمة -).  تكتب واصلة بين أجزاء من كلمة واحدة (على سبيل المثال ، أحمر وأصفر) ، وبين الكلمات - شرطة.  "الواصلة الناعمة" - تظهر فقط عندما تكون الواصلة ضرورية.  إذا كانت الكلمة خارج نطاق الأصل ، إذن <wbr>أو نقل جزء منه بدون واصلة.  يستخدم الطرح في التعبيرات الرياضية (على سبيل المثال ، 5 - 2).  يتم عرض خط رقمي في أرقام الهواتف (على سبيل المثال ، +7 800 000‒00‒00).  وكل هذا ليس مألوفًا - هذا موجود على لوحة المفاتيح.</li><li>بعد أي شخصية.</li><li>وفقًا لقواعد اللغة الروسية باستخدام الواصلة التلقائية.</li>
</ol><input id="dva" type="checkbox"><p><b>تجاوز التفاف</b> <input id="raz100" name="raz100" checked type="radio"><input id="raz101" name="raz100" type="radio"><br><b>التفاف النص</b> <input id="raz200" name="raz200" checked type="radio"><input id="raz201" name="raz200" type="radio"><br><b>كسر الكلمات</b> <input id="raz300" name="raz300" checked type="radio"><input id="raz301" name="raz300" type="radio"><input id="raz302" name="raz300" type="radio"><br><b>الخط مقطوع</b> <input id="raz400" name="raz400" checked type="radio"><input id="raz401" name="raz400" type="radio"><input id="raz402" name="raz400" type="radio"><input id="raz403" name="raz400" type="radio"><br><b>واصلات</b> <input id="raz500" name="raz500" checked type="radio"><input id="raz501" name="raz500" type="radio"><input id="raz502" name="raz500" type="radio"></p><p>لدينا ألف وتسعمائة وتسعة وتسعون كيلوغرامًا تمت إعادة فحصها بالفعل <span>جرابر جرافة محمل</p><p>
 <style>
.div {
 overflow-wrap: <b>normal;
</b><b>break-word;
</b> <i>/* не поддерживает IE, Firefox; является копией word-wrap */
</i>
 word-wrap: <b>normal
</b><b>break-word
</b>;
 word-break: <b>normal;
</b><b>keep-all;
</b><b>break-all;
</b> <i>/* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */
</i>
 line-break: <b>auto
</b><b>loose
</b><b>normal
</b><b>strict
</b>; <i>/* нет поддержки для русского языка */
</i>
<b> -webkit-hyphens: none;
</b><b> -webkit-hyphens: auto;
</b> <b>-ms-hyphens: none;
</b><b>-ms-hyphens: auto;
</b> hyphens: <b>manual
</b><b>none
</b><b>auto
</b>; <i>/* значение auto не поддерживается Chrome */
</i>
 width: 50%;
<b> white-space: nowrap;
</b>}
</style>
<div class="div" <b>lang = "ru"</b><b>lang = "ru"</b>> تمت إعادة فحص ألف وتسعمائة وتسعة وتسعين لدينا <b>-
</b>كيلوغرام محمل جرابير جرافة</div></p>
<h3>ما هو الفرق بين خاصية وأخرى</h3>
<p>بشكل افتراضي ، لا يتم وصل الكلمات الطويلة ما لم يُشار إليها صراحةً بشرطة ، وتبدأ بسطر جديد.</p><p>من أجل تجاهل الخطوط التي تظهر للعين على الفور ، نضيف فاصل الكلمات: keep-all؛  ...</p><p>لمنع المتصفح من الانتباه إلى الواصلة الناعمة ، نقوم بإدخال واصلات: لا شيء ؛  ...</p><p>إذا كان التفاف الكلمات مطلوبًا ، ثم التفاف الكلمات: كسر الكلمة ؛  أنصحك باستخدامه دائمًا ، لأنه مفهوم من قبل جميع المتصفحات.  وهو يختلف عن استراحة الكلمات: كسر الكل ؛  التي لها الأسبقية في تلك الكلمات التي لا تتناسب مع الكتلة تبدأ في سطر جديد ويتم احترام توصية الواصلة الناعمة.</p><p>عند استخدامها معًا ، فاصل الكلمات: كسر الكل ؛  مع واصلات: آلي ؛  ، يتم تجاهل هذا الأخير.  الواصلات: آلي ؛  يضع أي واصلات بالشكل الذي يراه مناسبًا.  ولكن لكي تعمل ، تحتاج إلى تعيين لغتك عن طريق تحديد سمة lang = "ru" في div.</p><h2>لا تلتف الكلمات بسطر آخر</h2>
<p>لنفترض أن عنصر القائمة أو الزر لا يبدو جيدًا إذا كان ينقسم.  لذلك ، من الضروري حظر فصلهم.  لهذا ، يجب تعيين جميع الخصائص المذكورة أعلاه على الوضع "الافتراضي" وإضافتها.  انقر فوق وانظر إلى المضلع الخاص بنا.</p><h2>التحكم في التفاف الكلمات للواصلات: auto؛</h2>
<p>تتراهيدروبيرانيل سيكلوبنتيل تتراهيدروبيريبيريدين</p><p>
 <div class="hyphens" lang="ru">تتراهيدروبيرانيل سيكلوبنتيل تتراهيدروبيرييدو <span class="nohyphens">بيريدينو</span>متوسط</div>
<style>
.hyphens {
 -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */
 text-align: justify;
}
.nohyphens {
 white-space: nowrap;
}
</style></p>
<h3>معلومات مختصرة</h3>
<h3>إصدارات CSS</h3>
<table class="cssver"><tr><th>CSS 1</th>
 <th>CSS 2</th>
 <th>CSS 2.1.2 تحديث</th>
 <th>CSS 3</th>
</tr><tr><td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
</tr></table><h3>وصف</h3>
<p>تحدد خاصية المسافة البيضاء كيفية عرض المسافات بين الكلمات.  في ظل الظروف العادية ، سيظهر أي عدد من المسافات في كود HTML كمسافة على صفحة ويب.  الاستثناء هو العلامة <pre>يتم عرض النص الموضوع في هذه الحاوية بجميع المسافات كما تم تنسيقه بواسطة المستخدم.  وبالتالي ، تحاكي المساحة البيضاء كيفية عمل العلامة. <pre>ولكن على عكس ذلك ، فإنه لا يغير الخط إلى خط أحادي المسافة.</p>
<h3>بناء الجملة</h3>
<p>مسافة بيضاء: عادي |  ناراب |  قبل |  الخط المسبق |  قبل التفاف |  يرث</p>
<h3>القيم</h3>يتم عرض النص العادي في نافذة المتصفح كالمعتاد ، ويتم تعيين فواصل الأسطر تلقائيًا.  يتم تجاهل المسافة البيضاء الآن ، ويتم تجاهل فواصل الأسطر في كود HTML ، ويتم عرض كل النص في سطر واحد ؛  ومع ذلك ، إضافة علامة <br>التفاف النص إلى سطر جديد.  pre يظهر النص متضمنًا جميع المسافات والواصلات كما أضافها المطور في كود HTML.  إذا كان الخط طويلاً جدًا بحيث لا يمكن احتواؤه في نافذة المتصفح ، فسيتم إضافة شريط تمرير أفقي.  لا يتم أخذ مسافات ما قبل السطر في الاعتبار في النص ، يتم التفاف النص تلقائيًا في السطر التالي إذا لم يكن مناسبًا للمنطقة المحددة.  يتم الاحتفاظ بكل المسافات والفواصل في النص ، ومع ذلك ، إذا كان عرض الخط لا يتناسب مع المنطقة المحددة ، فسوف يلتف النص تلقائيًا إلى السطر التالي.  يرث يرث القيمة من الأصل. <p>يتم عرض تأثير القيم على النص في الجدول.  واحد.</p>
<p>HTML5 CSS2.1 IE Cr Op Sa Fx</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>مساحة بيضاء</title>
 <style>
 .example {
 border: 1px dashed #634f36; /* Параметры рамки */
 background: #fffff5; /* Цвет фона */
 font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
 padding: 7px; /* Поля вокруг текста */
 margin: 0 0 1em; /* Отступы */
 white-space: pre; /* Учитываются все пробелы и переносы */
 }
 .exampleTitle {
 border: 1px solid black; /* Параметры рамки */
 border-bottom: none; /* Убираем линию снизу */
 padding: 3px; /* Поля вокруг текста */
 display: inline; /* Отображать как встроенный элемент */
 background: #efecdf; /* Цвет фона */
 font-weight: bold; /* Жирное начертание */
 font-size: 90%; /* Размер шрифта */
 margin: 0; /* Убираем отступы */
 white-space: nowrap; /* Переносов в тексте нет */
 }
 </style>
 </head>
 <body>
 <p class="exampleTitle">مثال</p>
 <p class="example">
 <html>
 <body>
 <b>نظرية فيرما الأخيرة</b><br>
 <i>X <sup><small>ن</small></sup>+ ص <sup><small>ن</small></sup>= Z <sup><small>ن</small></sup></i><br>حيث n عدد صحيح> 2</body>
 </html>
 </p>
 </body>
</html>
</p><p>تظهر نتيجة هذا المثال في الشكل.  واحد.</p>
<p>أرز.  1. تطبيق خاصية المساحة البيضاء</p>
<h3>نموذج الكائن</h3>
<p>document.getElementById ("elementID") .style.whiteSpace</p>
<h3>المتصفحات</h3>
<p>Internet Explorer حتى الإصدار 7.0 ويتضمن ذلك لا يدعم الخط المسبق والالتفاف المسبق والوراثة.  ل <textarea></p>
<p>لا يدعم Opera السابق للإصدار 9.5 قيمة الخط المسبق.  ل <textarea>تتصرف القيم العادية والقيم الأولية مثل ما قبل الالتفاف ، وتتصرف قيمة nowrap مثل السطر الأولي.</p>
<p>لا يدعم Safari قبل الإصدار 3.0 و iOS قيم الالتفاف المسبق والخط المسبق.</p>
<p>لا يدعم Firefox حتى الإصدار 2.0 ويتضمن قيمًا ما قبل الخط والتفاف.  ل <textarea>يتم تفسير القيم العادية و nowrap و pre على أنها التفاف أولي.</p>
<p>فلاد مرزفيتش</p>
 <p>على عكس النص في الطباعة ، نادرًا ما يتم استخدام الواصلة على صفحة الويب ، نظرًا لأننا لسنا مرتبطين بشكل صارم بحجم الورق.  يمكن عرض مواقع الويب على شاشات مختلفة ، بدقة مختلفة ، في أنظمة تشغيل ومتصفحات مختلفة.  كل هذا يؤدي إلى مزيج من المجموعات بحيث يستحيل التنبؤ بكيفية ظهور النص النهائي للمستخدم.  لهذا السبب ، عادة ما يكون النص بمحاذاة إلى اليسار ويتم وصله ككلمات كاملة.  ولكن مع ذلك ، فإن الواصلة ضرورية في بعض الحالات ، على سبيل المثال ، عند استخدام مصطلحات كيميائية أو طبية طويلة ، في أعمدة ضيقة بعرض معين ، من أجل الجماليات.  في HTML و CSS ، لا توجد العديد من الطرق اليدوية أو التلقائية لإضافة الواصلات ، لذلك سأقوم بإدراجها جميعًا.</p>
<h2>باستخدام العلامة <wbr></h2>
<p>بطاقة شعار <wbr>تم تقديمه في HTML5 ويقوم بإنشاء التفاف نصوص إذا لزم الأمر.  في تلك الأماكن التي يُسمح فيها ، وفقًا لقواعد اللغة الروسية ، بالنقل <wbr>(مثال 1).  إذا كانت الكلمة بأكملها تتناسب مع العرض المخصص ، فلن تعبر هذه العلامة عن نفسها بأي شكل من الأشكال ولن نعرف حتى عن وجودها.  إذا كانت الكلمة غير مناسبة ، فسيكون المتصفح في موقع العلامة <wbr>يخلق التحويل.</p>
<p>مثال 1. علامة <wbr></p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>التحويلات</title>
 <style> </style>
 </head>
 <body>
 <p class="word">واحد <wbr>سوبراديكلاس <wbr>واش أنجليكا بعد تخرجها من المدرسة اختارت مهنة الأعمال <wbr>إنتاج <wbr>سائق <wbr>وجوه.</p>
 </body>
</html>
</p><p>تظهر نتيجة هذا المثال في الشكل.  واحد.</p>
<p>أرز.  1. نص مع التفاف الكلمات</p>
<h2>تحويل مرن</h2>
<p>طلب <wbr>له عيب خطير - من المستحيل فهم ما إذا كانت الواصلة أمامنا أو كلمة منفصلة في سطر آخر.  لهذا السبب ، يمكن أن يضيع معنى الجملة ويُساء فهمه.  يجب عمل الواصلة وفقًا لقواعد الطباعة ، وهي: إضافة واصلة في نهاية السطر.  تقوم الواصلة الناعمة بعمل ممتاز في هذا الأمر ، فهناك رمز خاص لها في كود HTML -.  إنه يخدم نفس دور العلامة <wbr>- غير مرئي في النص العادي ويلف الكلمة بسطر آخر ، أثناء إضافة واصلة (المثال 2).</p>
<p>مثال 2. حمل لينة</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>التحويلات</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">اختارت أنجليكا من الدرجة الحادية عشرة ، بعد تخرجها من المدرسة ، مهنة سائق منتج-منتج.</p>
 </body>
</html>
</p><p>تظهر نتيجة هذا المثال في الشكل.  2. لاحظ إلى أي مدى أصبح النص ممتعًا ومفهومًا من الناحية الجمالية مقارنةً بالتين.  واحد.</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/blog/break_2.png' height="169" width="182" loading=lazy loading=lazy></p>
<p>أرز.  2. نص مع التفاف الكلمات</p>
<h2>خاصية فاصل الكلمات</h2>
<p>لأتمتة عملية إنشاء الواصلات ، استخدم خاصية فاصل الكلمات مع قيمة فاصل الكل (المثال 3).  ليست هناك حاجة لإضافة أي رموز أو علامات إلى HTML ، فكل شيء يتم توليه بواسطة الأنماط.</p>
<p>مثال 3. استخدام فاصل الكلمات</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>التحويلات</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 word-break: break-all;
 }
 </style>
 </head>
 <body>
 <p class="word">اختار طالب الصف الحادي عشر أنجليكا بعد تخرجه من المدرسة مهنة كاتب.</p>
 </body>
</html>
</p><p>تظهر نتيجة هذا المثال في الشكل.  3. لا تؤخذ قواعد الواصلة في الاعتبار في هذه الحالة ، لذلك يمكن وصل الكلمات بطريقة غريبة جدًا.</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/blog/break_3.png' height="148" width="182" loading=lazy loading=lazy></p>
<p>أرز.  3. نص مع التفاف الكلمات</p>
<p>من بين جميع الطرق المدرجة "شبه اليدوية" باستخدام - تعطي أفضل نتيجة - يتم مراعاة قواعد اللغة الروسية ، يبدو النص الأكثر إرضاءً من الناحية الجمالية.  استخدمه عندما تكون هناك كلمات طويلة في النص.</p>
<h2>خاصية الواصلات</h2>
<p>وأخيرًا ، فإن الخاصية الأقوى والأكثر ملاءمة لإضافة الواصلات تلقائيًا هي الواصلات.  يعتمد عملها على قاموس الواصلة المدمج في المتصفح ، وبالتالي فهو يعطي أفضل نتيجة.  مدعوم في IE10 و Firefox و Android و iOS.  لا يدعم Chrome و Opera.  لجعل كل شيء يعمل ، للعلامة <html>أضف السمة lang بالقيمة ru (مثال 4).</p>
<p>مثال 4. استخدام الواصلات</p><p>
 <!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>التحويلات</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 }
 </style>
 </head>
 <body>
 <p class="word">اختار طالب الصف الحادي عشر أنجليكا بعد تخرجه من المدرسة مهنة كاتب.</p>
 </body>
</html>
</p><p>تظهر نتيجة هذا المثال في الشكل.  4.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/blog/break_4.png' height="146" width="182" loading=lazy loading=lazy></p>
<p>أرز.  4. نص مع التفاف الكلمات</p>
<h2>منع الواصلة</h2>
<p>غالبًا ما تنشأ مشكلة معكوسة أيضًا - لمنع الواصلات في تلك الأماكن التي تكون فيها ، وفقًا لقواعد اللغة ، غير مقبولة.  على سبيل المثال ، لا يمكنك فصل وحدات القياس عن الرقم (10 مل) ، وتعيين العام (54 قبل الميلاد) ، والأحرف الأولى من اللقب ، وكسر الاختصارات المستمرة (إلخ) ، وما إلى ذلك حتى لا يقوم المتصفح بذلك. أضف واصلات في الفراغ ، يجب استبدالها بمسافة غير منقسمة (مثال 5).</p>
<p>مثال 5. الاستخدام</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>التحويلات</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">بحيرة عند إحداثيات 70 ° 58 19 ث.  ش.  97 ° 24 ′ 5 ″ شرقًا  تقع القرية في منطقة Taimyr Dolgano-Nenets في إقليم كراسنويارسك في روسيا.</p>
 </body>
</html>
</p><p>في هذا المثال ، من أجل التهجئة الصحيحة للإحداثيات ، يتم استخدامه بطريقة لا تسمح بالتفاف النص.</p>
<p>أهلا بالجميع).  ما زلت أكتب عن الخصائص المفيدة المتنوعة للغة css التي يمكن أن تساعد بطريقة ما في التخطيط.  واليوم أريد أن أخبرك بكيفية لف الكلمات في css إذا كانت لا تتناسب مع الحاوية الخاصة بك.  سأريكم كل شيء بمثال حقيقي.</p>
 <h2>قم بتشغيل الواصلة للكلمات التي لا تناسبها</h2>
 <p>لنفترض أن لدي كتلة بعرض 100 بكسل وأحتاج إلى كتابة بعض النص فيها.  يحتوي النص على كلمة " <i>الاستخراج الذاتي</i>".  هذا أرشيف ، على سبيل المثال) ولكن ليس الهدف.  الكلمة طويلة جدًا ، ولن تتناسب مع عرض الحاوية.  دعنا نكتبها في مثل هذه الكتلة الضيقة (100 بكسل).  ماذا سيحدث؟</p><p>كما ترون ، الكلمة السيئة زحفت خارج الحاوية ، حسنًا ، ليس لديه مكان يذهب إليه ، ماذا يمكنك أن تفعل.  وهذا بدون مسافة بادئة.  لذلك ، هنا تأتي خاصية التفاف الكلمات للإنقاذ.  إليك ما تحتاجه لطلب كتلة لتمكين التفاف النص فيها:</p>
 <p>التفاف الكلمات: كسر الكلمة ؛</p>
 <p>وللإقناع ، يمكنك أيضًا إضافة حشوة.  لذلك ، بعد تطبيق الخاصية ، نرى أن الكلمات الطويلة جدًا ستلتف كلمة بحرف إلى سطر آخر.  علاوة على ذلك ، حتى إذا كان السطر الثاني غير كافٍ للكلمة ، فسيتم نقل باقي السطر إلى السطر الثالث ، إلخ. <br><br>أود أن أشير إلى أنه يمكن استخدام العقار بأمان.  أولاً ، إنه يعمل بشكل رائع في المتصفحات اليوم.  ثانيًا ، إنه يعمل بذكاء.  وبالتحديد ، بالنسبة لجميع الكلمات العادية ، لن يكون هناك واصلة ، وسيتم نقل الكلمات بأكملها إلى السطر التالي ، لذلك لن تتأثر قابلية القراءة.  يمكنك رؤيته في لقطة الشاشة هذه.</p>
 <h2>متى تستخدم التفاف النص</h2>
 <p>في الواقع ، حتى الآن أرى حالتين من حالات الاستخدام.  الأول هو فقط للكتل الضيقة ، حيث تخشى أن تزحف الكلمات الطويلة بشكل قبيح خارج الكتلة.  والثاني عندما تصور المصمم بحيث يكون اسم الموقع في عدة أسطر.</p>
 <p>لذلك ، في هذه المقالة ، تعلمنا كيفية عمل التفاف النص في css.  هذا كل شيء بالنسبة لي اليوم.  أرك لاحقا.</p>

<br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
	escape(document.referrer)+((typeof(screen)=="undefined")?"":
	";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
	screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
	";"+Math.random()+
	"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
			</article>

			

			<div class="post-bottom">

				<div class="post-share">
					<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
					<script src="//yastatic.net/share2/share.js"></script>
					<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div>
				</div>

				

			</div>

	

			<div class='yarpp-related'>
	<div class="related-items">

		<div class="headline">لم تجد إجابة لسؤالك؟  إنظر الى هنا</div>

	
		<div class="items">
					


        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/ar/kak-rabotaet-yandeks-disk-na-iphone-kak-s-yandeks-diska-skachat-video-na.html"><img src="/uploads/4ccd19f8ac841cc6b51ad25379207424.jpg" width="120" height="120" alt="كيفية تنزيل مقاطع الفيديو من Yandex Disk إلى iPhone: طريقة سهلة" class="related-item__image" / loading=lazy loading=lazy>كيفية تنزيل مقاطع الفيديو من Yandex Disk إلى iPhone: طريقة سهلة</a>
        <div class="related-item__comments"><span></span></div>
    </div>



					
        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/ar/licenzionnoe-soglashenie-ob-usloviyah-ispolzovaniya-programmnogo.html"><img src="/uploads/d069f36fa4c38c4b980287a14c828587.jpg" width="120" height="120" alt="اتفاقية الترخيص لشروط استخدام برنامج Dr" class="related-item__image" / loading=lazy loading=lazy>اتفاقية الترخيص لشروط استخدام برنامج Dr</a>
        <div class="related-item__comments"><span></span></div>
    </div>

					
        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/ar/airyware-tuner---luchshii-tyuner-v-vashem-smartfone-airyware-tuner---luchshii-tyuner-v-vashem.html"><img src="/uploads/e031055337594f744bdfef4f6ed804a7.jpg" width="120" height="120" alt="Airyware Tuner - أفضل موالف في هاتفك الذكي تطبيق لضبط الغيتار على خلفية Windows" class="related-item__image" / loading=lazy loading=lazy>Airyware Tuner - أفضل موالف في هاتفك الذكي تطبيق لضبط الغيتار على خلفية Windows</a>
        <div class="related-item__comments"><span></span></div>
    </div>

				</div>

	
	</div>
</div>
			
		<div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div>
			



	
	

	

			
		</main>

		

<aside class="sidebar">



						


        
        <div class="advices" data-theme="vannapedia_v.3">
        <div class="headline"></div>
        <div class="advices-content">
            <img src="/uploads/b7c9cac072cc33ab4b3739137fb8af69.jpg" width="120" height="120" alt="برنامج مجاني لنظام التشغيل Windows تنزيل مجاني" class="advices__image" / loading=lazy loading=lazy>
            <div class="advices__title" data-id="3334"><a href="https://appcube.ru/ar/antivirus-avg-64-bit-besplatnye-programmy-dlya-windows-skachat.html">برنامج مجاني لنظام التشغيل Windows تنزيل مجاني</a></div>
        </div>

    </div>




	
			<div class="vk-widget" id="text-3">			<div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script>


<div id="vk_groups"></div>
</div>
		</div>
				<div class="sidebar-questions">
		<div class="headline">جديد</div>
		<ul>
        <li><a href="https://appcube.ru/ar/draiver-nvidia-dlya-8-1-uproshchennoi-besplatnye-programmy-dlya-windows-skachat.html" >برنامج مجاني لنظام التشغيل Windows تنزيل مجاني</a></li>
        <li><a href="https://appcube.ru/ar/besplatnye-programmy-dlya-windows-skachat-besplatno-besplatnye.html" >برنامج مجاني لنظام Windows تنزيل تنزيل مجاني nvidia لنظام التشغيل Windows 8</a></li>
        <li><a href="https://appcube.ru/ar/megafon-modem-draiver-windows-10-megafon-modem-installyaciya.html" >برنامج تشغيل مودم مكبر الصوت windows 10</a></li>
        <li><a href="https://appcube.ru/ar/megafon-upravlenie-modemom-windows-10-skachat-megafon-modem.html" >مودم مكبر الصوت ويندوز 10</a></li>
        <li><a href="https://appcube.ru/ar/skachat-prilozhenie-kamera-na-russkom-besplatno-ekrannaya-kamera-ustanovka-veb.html" >الكاميرا التي تظهر على الشاشة تثبيت كاميرا الويب على جهاز كمبيوتر يعمل بنظام Windows 10</a></li>
        <li><a href="https://appcube.ru/ar/draivery-dlya-kompyutera-draivery-dlya-kompyutera-skachat.html" >برامج تشغيل للكمبيوتر تنزيل جميع برامج التشغيل لنظام التشغيل windows 8</a></li>
</ul>
		
	</div>

							<div class="section">
    <div id="macire1" style="height:500px;width:240px;" align="center"></div>
</div>
		
							<div class="section">
				<div class="headline">المواد شعبية</div>
				<ul class="sidebar-posts">
    <li><a href="https://appcube.ru/ar/kak-otkryt-mms-soobshchenie-na-kompyutere-kak-posmotret-mms-na.html"><img src="/uploads/725d5a42f7f9f8d1a672c8205b17e36b.jpg" width="80" height="80" alt="كيفية مشاهدة رسائل الوسائط المتعددة على هاتفك: بعض النصائح كيفية عرض رسالة وسائط متعددة" / loading=lazy loading=lazy>كيفية مشاهدة رسائل الوسائط المتعددة على هاتفك: بعض النصائح كيفية عرض رسالة وسائط متعددة</a></li>
    <li><a href="https://appcube.ru/ar/kak-vyzvat-skoruyu-s-mobilnika-kak-vyzvat-ekstrennye-sluzhby-kakaya.html"><img src="/uploads/7c45e18666e3d942e672ee8edee6de39.jpg" width="80" height="80" alt="كيف تتصل بخدمات الطوارئ" / loading=lazy loading=lazy>كيف تتصل بخدمات الطوارئ</a></li>
    <li><a href="https://appcube.ru/ar/skoraya-po-mobilnomu-bilain-kak-vyzvat-na-dom-vracha-skoruyu-ili.html"><img src="/uploads/34995d89c96919e0ce83e73da5518316.jpg" width="80" height="80" alt="كيف تتصل بطبيب أو سيارة إسعاف أو غرفة طوارئ في المنزل" / loading=lazy loading=lazy>كيف تتصل بطبيب أو سيارة إسعاف أو غرفة طوارئ في المنزل</a></li>
</ul>
			</div>
		
							<div class="section">
				<div class="headline">جديد في الموقع</div>
				<ul class="sidebar-posts  sidebar-photo">
    <li><a href="https://appcube.ru/ar/oblako-dlya-peredachi-failov-oblachnoe-hranilishche-dannyh-kak-sozdat.html">تخزين البيانات السحابية</a></li>
    <li><a href="https://appcube.ru/ar/izmenit-pusk-na-vindovs-8.html">سيتم تغيير بدء التشغيل إلى windows 8</a></li>
    <li><a href="https://appcube.ru/ar/pochemu-vydaet-oshibku-pri-zapuske-kompyutera-nastroikaaivaemost.html">برنامج قابل للتخصيص</a></li>
    <li><a href="https://appcube.ru/ar/v-windows-8-vernut-knopku-pusk.html">سيعيد Windows 8 زر البدء</a></li>
    <li><a href="https://appcube.ru/ar/kak-nastroit-skaip-poshagovaya-instrukciya-ustanovka-skaipa-na.html">تثبيت Skype على جهاز كمبيوتر (إرشادات خطوة بخطوة)</a></li>
</ul>
				
			</div>
		
		
		</aside>

	</div>

	

<footer class="footer">

		
				<nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="https://appcube.ru/ar/">جديد</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6788"><a href="https://appcube.ru/ar/reestr-windows-dlya-nachinayushchih-bazovye-ponyatiya-monitoring-i-uhod.html">المفاهيم الأساسية والرصد والرعاية</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6787"><a href="https://appcube.ru/ar/sozdanie-zagruzochnoi-fleshki-os-x-el-capitan-ustanavlivaem-el-capitan-s.html">قم بتثبيت El Capitan من محرك أقراص فلاش USB</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6786"><a href="https://appcube.ru/ar/ne-rabotaet-sensor-na-noute-programmnoe-vklyuchenie-tachpada.html">يقوم البرنامج بتمكين لوحة اللمس</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6785"><a href="https://appcube.ru/ar/pri-vklyuchenii-komp-vydaet-oshibku-chto-delat-esli-net-zvuka-analiz.html">ماذا لو لم يكن هناك صوت؟</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="https://appcube.ru/ar/">شائع</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6784"><a href="https://appcube.ru/ar/ustanovka-brauzera-po-umolchaniyu-kak-ustanovit-brauzer-po-umolchaniyu-v.html">كيفية ضبط المتصفح الافتراضي على نظام Windows</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6783"><a href="https://appcube.ru/ar/komp-vydaet-oshibku-chto-delat-konflikty-operativnoi-pamyati-dlya-kopirovaniya.html">صراعات ذاكرة الوصول العشوائي</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6781"><a href="https://appcube.ru/ar/kak-obedinit-dva-lokalnyh-diska-sliyanie-razdelov-diska-v-windows.html">دمج أقسام القرص في الويندوز</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6780"><a href="https://appcube.ru/ar/chto-delat-ne-udaetsya-udalit-papku-arhiviruem-papku-kotoraya.html">أرشفة المجلد الذي لم يتم حذفه</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6779"><a href="https://appcube.ru/ar/kak-sdelat-brauzer-po-umolchaniyu-vybor-brauzera-po-umolchaniyu-v-os.html">اختيار المتصفح الافتراضي في Windows</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6778"><a href="https://appcube.ru/ar/vklyuchit-prosmotr-fotografii-windows-7-reshenie-problemy-sredstva-prosmotra.html">حل مشكلة Windows Photo Viewer</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6777"><a href="https://appcube.ru/ar/v-zagruzkah-ne-udalyaetsya-fail-zakrytie-programm-ispolzuyushchih-faily-iz.html">إغلاق البرامج باستخدام ملفات من مجلد</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6776"><a href="https://appcube.ru/ar/parol-akkaunta-vindovs-gde-naiti-kak-uznat-parol-ot-kompyutera-v.html">كيفية معرفة كلمة المرور من جهاز كمبيوتر يعمل بنظام التشغيل Windows7 إذا كانت ممكّنة بالفعل</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="https://appcube.ru/ar/">موصى به</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6775"><a href="https://appcube.ru/ar/ne-rabotaet-klaviatura-na-noutbuke-chto-delat-chto-delat-esli-klaviatura.html">ماذا تفعل إذا كانت لوحة المفاتيح لا تعمل بسبب البرنامج</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6774"><a href="https://appcube.ru/ar/zapretit-vhod-v-sistemu-s-vremennymi-profilyami-ispravlyaem-oshibku-pri.html">تصحيح الخطأ عند تشغيل الكمبيوتر "تسجيل الدخول إلى النظام بملف تعريف مؤقت</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6773"><a href="https://appcube.ru/ar/ne-ustanavlivaetsya-kingo-rut-kingo-android-root-luchshee-prilozhenie-dlya.html">Kingo Android Root هو أفضل تطبيق لتثبيت حقوق الجذر</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6771"><a href="https://appcube.ru/ar/kak-otklyuchit-uslugu-vam-zvonili-na-mts-i-est-li-v-nei.html">"تلقيت مكالمة" من MTS - ما هذه الخدمة؟</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6770"><a href="https://appcube.ru/ar/kak-otklyuchit-uslugu-vam-zvonili-na-mts-i-est-li-v-nei-neobhodimost-kak.html">كيفية إلغاء تنشيط خدمة "لقد تلقيت مكالمة" من MTS؟</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6769"><a href="https://appcube.ru/ar/chto-budet-esli-na-aifone-postavit-sbros-nastroek-i-polnyi-sbros-apple-iphone.html">إعادة ضبط المصنع وإعادة ضبط جهاز Apple iPhone</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6768"><a href="https://appcube.ru/ar/chto-budet-esli-postavit-datu-sbros-nastroek-i-polnyi-sbros-apple-iphone-sozdanie.html">إعادة ضبط المصنع وإعادة ضبط جهاز Apple iPhone</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6767"><a href="https://appcube.ru/ar/shestiyadernyi-processor-kompyuternyi-resurs-u-sm-vneshnii-vid-i.html">موارد الكمبيوتر U SM</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="https://appcube.ru/ar/">عن الموقع</a>
<ul  class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">عن الموقع</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">الإعلان على الموقع</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="">جهات الاتصال</a></li>
	
</ul>
</li>
</ul></nav>
			

   

		<div class="footer-bottom">

			<div class="footer-left">

    <div class="foot__logo">
        <div class="footer__logo-sitename">appcube <span>ru</span></div>
    </div>
  <style>
    .foot__logo {
    min-height: 35px;
    margin: 0 0 11px -79px;
    padding: 9px 0 0 79px;
    text-decoration: none;
}
  </style>

    <p>© 2021 جميع الحقوق محفوظة</p>
    <p>موقع عن أجهزة الكمبيوتر</p>

    <ul class="footer-bottom__nav">
        <li><a href="" >الإعلان عن المشروع</a></li>
    </ul>

</div>

			<div class="footer-buttons">

</div>


					<ul class="footer__soc">
											<li><a href="http://vk.com/"  target="_blank" class="vk">في تواصل مع</a></li>
															<li>زملاء الصف</li>
															<li><a href="http://www.facebook.com/"  target="_blank" class="fb">موقع التواصل الاجتماعي الفيسبوك</a></li>
															<li><a href="https://twitter.com/"  target="_blank" class="twi">تويتر</a></li>
										</ul>
		
			<div class="footer-right">

				<div class="footer__note"></div>

				<div class="footer__counters" id="text-2">			<div class="textwidget"></div>
		</div>
			</div>

		</div>

	</footer>



</div>
</div>
<link rel='stylesheet' id='wp-lightbox-bank.css-css'  href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' />
<script type='text/javascript' src='https://appcube.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script>

<script type='text/javascript' src='/assets/scripts1.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "smooth_scroll":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ;
</script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script>
</body>
</html>