يعد التفاف النص مهمة مهمة عند إنشاء صفحات الويب ، خاصة عندما لا يتناسب المحتوى مع سطر واحد. السلوك القياسي للنص في هتمل هو تمديده خارج الكتلة ، والتي يمكن أن تكون غير مريحة للمستخدم. توفر مواصفات كس عدة طرق لإدارة التفاف النص التي تسمح لك بإنشاء صفحات ويب قابلة للقراءة وسهلة الاستخدام.
يمكن تقسيم الكلمات الموجودة في سطر من النص التي لا تتناسب مع سطر واحد لأسباب مختلفة ، على سبيل المثال ، بسبب قيود عرض الكتلة ، ووجود مسافات غير متقطعة وأحرف أخرى ، وتحديد الواصلة الصريحة أو استخدام الواصلة للكلمات الطويلة. للتحكم تلقائيا في التفاف النص ، يحتوي كس على خاصية التفاف الكلمات التي تسمح لك بالتحكم في المدة التي يتم فيها تقسيم الكلمات في نهاية السطر ، بما في ذلك القدرة على لفها.
يساعد استخدام خاصية التفاف الكلمات في إنشاء تصميم مطاطي يتكيف مع عرض شاشة المستخدم ويوفر قراءة نصية مريحة.
- التفاف النص باستخدام كس
- تقنيات نقل النص
- 1. كلمة التفاف
- 2. نقل بواسطة الأحرف
- 3. باستخدام عناصر قائمة أتش تي أم أل
- 4. باستخدام الجداول
- 5. باستخدام خاصية كس "تجاوز التفاف"
- 6. باستخدام خاصية كس "الواصلات"
- خصائص المغلق لالتفاف النص
- 1. أبيض-الفضاء
- 2. كلمة كسر
- 3. الواصلات
- 4. تجاوز التفاف
- التفاف النص التلقائي
- التفاف النص اعتمادا على عرض الحاوية
- سؤال وجواب
- كيفية تنفيذ نقل النص إلى سطر جديد باستخدام المغلق?
- كيف يمكنني تعيين التفاف النص فقط بعد مسافة باستخدام المغلق?
- هل هناك طريقة لتحديد أن النص يجب أن تكون ملفوفة فقط في عرض معين من الحاوية?
التفاف النص باستخدام كس
التفاف النص هو عملية وضع النص على صفحة ويب بطريقة يتم نقلها تلقائيا إلى سطر جديد عند ملء عرض الحاوية.
أوراق الأنماط المتتالية (كس) هي المسؤولة عن التنسيق السليم وتسهيل عملية نقل النص.
يتم استخدام العديد من الخصائص للتحكم في التفاف النص في كس ، بما في ذلك:
التفاف الكلمات: تتيح لك هذه الخاصية التحكم في التفاف النص داخل العناصر.
المساحة البيضاء: تحدد هذه الخاصية كيفية التعامل مع المسافات وفواصل الأسطر في النص.
للحصول على تخطيطات أكثر تعقيدا وخيارات إضافية للتحكم في التفاف النص ، يمكنك أيضا استخدام خصائص كس الأخرى مثل تجاوز النص والتفاف النص والتجاوز.
باستخدام خصائص كس هذه ، يمكنك وضع النص على صفحة ويب بحيث تبدو قابلة للقراءة وسهلة الاستخدام.
بالإضافة إلى كس ، فإنه يستحق أيضا تذكر الترميز الدلالي من هتمل ، والتي يمكن أن تؤثر أيضا على طريقة التفاف النص. باستخدام العلامات المناسبة ص, قوي, م, رأ, المجاهدين, لي, الجدول يساعد المتصفحات تفسير وعرض النص بشكل صحيح.
تقنيات نقل النص
يعد التفاف النص جزءا مهما من تصميم الويب ويمكن تنفيذه باستخدام عدة تقنيات.
1. كلمة التفاف
تقنية نقل النص الأكثر شيوعا وبساطة هي نقل الكلمات. مع هذا النقل ، يتم تقسيم النص إلى كلمات منفصلة ، وإذا كان السطر لا يتناسب تماما مع سطر واحد ، يتم نقل الكلمة الأخيرة إلى السطر التالي.
2. نقل بواسطة الأحرف
هناك طريقة أخرى لنقل النص وهي النقل بالأحرف. هنا ، لا يتم تقسيم النص بالكلمات ، ولكن حسب كل حرف على حدة. توفر هذه الطريقة تقسيما أكثر دقة للنص ، ولكنها قد تكون أقل قابلية للقراءة للمستخدمين.
3. باستخدام عناصر قائمة أتش تي أم أل
طريقة واحدة لإضافة التفاف النص هو استخدام عناصر قائمة هتمل مثل
4. باستخدام الجداول
يمكن أيضا نقل النص باستخدام جداول هتمل. يمكن أن تحتوي كل خلية جدول على كلمة واحدة أو مجموعة من الكلمات ، وسيتم نقل النص تلقائيا إلى الخلية أو الصف التالي إذا لم تكن هناك مساحة كافية.
5. باستخدام خاصية كس "تجاوز التفاف"
باستخدام خاصية كس" تجاوز التفاف " يمكنك إضافة التفاف النص داخل العنصر. إذا تم تحديد قيمة "كسر كلمة" ، سيتم تقسيم النص إلى سطر جديد ، إذا كان من الضروري وضعه على سطر واحد. هذه الطريقة مفيدة بشكل خاص عند العمل مع أسطر طويلة من النص.
6. باستخدام خاصية كس "الواصلات"
تسمح لك خاصية "الواصلات" المغلق بإضافة واصلات إلى الكلمات باستخدام الواصلات ( " - " ) ، والتي يمكن أن تحسن مظهر النص. إذا تم تعيين القيمة على" تلقائي " ، فسيقوم المتصفح تلقائيا بإضافة واصلات لتغليف الكلمات الطويلة. هذا مفيد بشكل خاص عند العمل بلغات متعددة ، حيث قد يكون للغات المختلفة قواعد واصلة مختلفة.
خصائص كس لتغليف النص
هناك العديد من الخصائص في كس التي تسمح لك للسيطرة على التفاف النص. الاستخدام السليم لهذه الخصائص يسمح لك لتخصيص مظهر وسلوك النص على صفحة ويب.
1. أبيض-الفضاء
تتيح لك خاصية المساحة البيضاء التحكم في كيفية تعامل المتصفح مع أحرف المسافات البيضاء داخل عنصر ما.
- عادي-يتم ضغط أحرف المسافات البيضاء في مسافة واحدة ، ويتم نقل النص تلقائيا.
- يتم حفظ أحرف المسافات البيضاء المسبقة ويتم تنفيذ فواصل الأسطر يدويا فقط باستخدام حرف السطر الجديد.
- نوراب-يتم ضغط أحرف المسافات البيضاء في مسافة واحدة ، ولكن النص غير ملفوف.
2. كلمة كسر
تحدد خاصية فاصل الكلمات كيفية قيام المتصفح بلف الكلمات إذا خرجت من الحاوية.
- عادي-يكسر المتصفح الكلمات فقط بمسافات أو واصلات. إذا كانت الكلمة لا تتناسب مع سطر واحد ، فإنها تخرج من الحاوية.
- كسر الكل-يمكن للمتصفح كسر الكلمات في أي مكان إذا خرجت من الحاوية.
- تبقى الكلمات الطويلة في سطر واحد ولا يتم نقلها إلى سطر جديد.
3. الواصلات
تسمح لك خاصية الواصلات بتعيين واصلة الكلمات بواسطة المقاطع.
- لا شيء-لا يتم ربط الكلمات بواسطة المقاطع.
- يحدد المتصفح التلقائي بشكل مستقل الكلمات التي يمكن توصيلها بواسطة المقاطع.
- يمكن ضبط فواصل الكلمات اليدوية بواسطة مقطع لفظي يدويا باستخدام .
4. تجاوز التفاف
تحدد خاصية التفاف الفائض ما إذا كان يسمح للمتصفح بكسر الكلمات الطويلة إذا لم تكن مناسبة في سطر واحد.
- المتصفح العادي لا يكسر الكلمات الطويلة ويتجاوز الحاوية.
- كسر الكلمة - إذا كانت الكلمة الطويلة لا تتناسب مع سطر واحد ، فسيتم كسرها ونقلها إلى السطر التالي.
تسمح لك خصائص كس هذه بالتحكم في التفاف النص والتأكد من عرض المحتوى بشكل صحيح على صفحة الويب ، حتى عند تغيير حجم الحاوية.
التفاف النص التلقائي
التفاف النص التلقائي هو عملية يتم فيها نقل سطر طويل من النص إلى سطر جديد بحيث يتناسب مع كتلة أو حاوية محدودة.
واحدة من الطرق الأكثر شعبية وأبسط لتنفيذ التفاف النص التلقائي هو استخدام الملكية المغلق كلمة التفاف. تتيح لك هذه الخاصية تعيين سلوك معين لأسطر النص عندما لا تتناسب مع الحاوية الخاصة بها.
إذا تم تعيين قيمة الخاصية كلمة التفاف إلى وضعها الطبيعي ، ثم لن يتم نقل الكلمات تلقائيا ، وإذا تم تعيين القيمة إلى كسر كلمة ، ثم سيتم نقل الكلمات إلى سطر جديد لتناسب في الحاوية.
لسيناريوهات أكثر تعقيدا ، إذا كان النص يحتوي على عناوين ورل طويلة ، يمكننا أيضا استخدام خاصية التفاف تجاوز المغلق. إذا تم تعيين قيمة هذه الخاصية إلى كسر كلمة ، سيتم عرض الأسطر في منطقة محدودة ثم نقلها تلقائيا إلى سطر جديد إذا لم تكن مناسبة.
.
وبالتالي ، يعد التفاف النص التلقائي أداة مهمة لتطوير الويب تتيح لك إدارة الأسطر الطويلة من النص بفعالية وضمان سهولة القراءة للمستخدمين. باستخدام خصائص كس المناسبة وعلامات هتمل ، يمكن للمطورين إنشاء واجهات سريعة الاستجابة وسهلة الاستخدام.
التفاف النص اعتمادا على عرض الحاوية
عند إنشاء مواقع الويب ، تكون هناك حاجة أحيانا لعرض نص داخل حاوية ، حيث يتم نقل النص تلقائيا إلى سطر جديد إذا كانت الحاوية ضيقة جدا بحيث لا تناسب كل النص في سطر واحد.
لتنفيذ التفاف النص ، اعتمادا على عرض الحاوية ، يمكنك استخدام خصائص كس من كلمة التفاف و كلمة كسر.
تحدد خاصية التفاف الكلمات ما إذا كان يجب على المتصفح لف كلمة في سطر جديد إذا لم يكن مناسبا للسطر الحالي للحاوية. القيم الممكنة لخاصية التفاف الكلمات:
- عادي-افتراضيا ، لا يتم الواصلة الكلمات;
- كسر كلمة-يتم نقل كلمة إلى سطر جديد إذا كان يحتاج إلى قطع لتناسب في السطر الحالي;
على سبيل المثال ، لتمكين التفاف الكلمة على سطر جديد إذا لم يكن مناسبا في الحاوية ، يكفي إضافة قاعدة كس التالية:
.حاوية {
كلمة التفاف: كسر كلمة;
}
تحدد خاصية فاصل الكلمات كيفية قيام المتصفح بكسر السطر عندما لا يتناسب النص مع عرض الحاوية. القيم الممكنة لخاصية كسر الكلمات:
- عادي-بشكل افتراضي ، يتم كسر السلسلة فقط في الأماكن التي توجد بها مسافات;
- كسر الكل-السلسلة مكسورة حتى لو لم تكن هناك مسافات بحيث تناسب عرض الحاوية;
- الحفاظ على الكل-لم يتم كسر السلسلة ، حتى لو كانت هناك مسافات ، للحفاظ على مجموعات من الأحرف معا.
على سبيل المثال ، لكسر الخطوط حتى بدون مسافات ، يكفي إضافة قاعدة كس التالية:
.حاوية {
كلمة كسر: كسر جميع;
}
يعتمد الاختيار بين خصائص التفاف الكلمات وكسر الكلمات على المتطلبات والتفضيلات المحددة للمطور. في بعض الحالات ، قد يكون من الضروري الجمع بين كلتا الخاصيتين.
وبالتالي ، فإن استخدام خصائص التفاف الكلمات وكسر الكلمات يسمح لك بتنفيذ التفاف النص اعتمادا على عرض الحاوية وإنشاء عرض مناسب وممتع من الناحية الجمالية للنص على موقع الويب.
سؤال وجواب
كيفية تنفيذ نقل النص إلى سطر جديد باستخدام المغلق?
لنقل النص إلى سطر جديد باستخدام كس ، يمكنك استخدام الخاصية " كلمة التفاف "مع قيمة"كسر كلمة". سيسمح هذا بنقل النص إلى سطر جديد إذا كان عرضه أكبر من عرض الحاوية.
كيف يمكنني تعيين التفاف النص فقط بعد مسافة باستخدام المغلق?
لف النص فقط بعد مسافة ، يمكنك استخدام خاصية " المسافة البيضاء "بقيمة" التفاف مسبق "أو"سطر مسبق". وبالتالي ، سيتم نقل النص إلى سطر جديد فقط عندما يواجه مسافة.
هل هناك طريقة لتحديد أن النص يجب أن تكون ملفوفة فقط في عرض معين من الحاوية?
نعم ، هناك طريقة لتحديد عرض الحاوية التي يجب أن يتم لف النص عليها. للقيام بذلك ، يمكنك استخدام خاصية "العرض الأقصى" بالقيمة المطلوبة. سيتم لف النص فقط عندما يصل عرض الحاوية إلى القيمة المحددة.