كسر الكلمات بعد أحرف خاصة مثل الواصلات في CSS
هل واجهت يومًا مشكلة مع سلاسل نصية طويلة تتجاوز عرض حاويتها؟ يصبح الأمر أكثر تعقيدًا عندما تكون الأحرف الخاصة، مثل الواصلات، متضمنة. في هذا المنشور، سنستكشف حلًا يمكنك من إدارة التفاف النص بفعالية بعد الواصلات، مما يعزز تجربة المستخدم والقدرة على القراءة.
فهم المشكلة
دعونا نفكر في سيناريو CSS أساسي:
div {
width: 150px;
}
وفي HTML الخاص بك، لديك:
<div>
12333-2333-233-23339392-332332323
</div>
هنا، يتجاوز النص داخل <div> العرض المحدد بـ 150 بكسل. يمكن أن يؤدي ذلك إلى عرض غير صحيح للنص، مما يجعل من الصعب على المستخدمين قراءة المحتوى. التحدي هو أن نجعل السلسلة تلتف إلى سطر جديد تحديدًا عند حرف الواصل (-).
الحل: استخدام الواصلات اللينة
لنجعل هذا يعمل، يمكننا استخدام حرف خاص يعرف باسم الواصلات اللينة. من خلال استبدال الواصلات العادية بواصلة لينة، نوجه المتصفح لكسر السطر عند تلك النقاط عند الحاجة.
كيفية تنفيذ الواصلة لينة
-
استبدال الواصل العادي بالواصلة اللينة: بدلاً من استخدام الواصل (-)، ستقوم باستبداله بكيان HTML
­. هذا يسمح للمتصفح بمعاملته كنقطة كسر محتملة.سيكون HTML المعدل كما يلي:
<div> 12333­2333­233­23339392­332332323 </div> -
الناتج الناتج: عند القيام بذلك، إذا كان النص يحتاج إلى الالتفاف بسبب قيود العرض 150 بكسل، فإنه سيفصل بشكل مرتب عند الواصلة. سيبدو المحتوى الملفوف أكثر تنظيمًا وجاذبية بصريًا.
مثال كامل
إليك شفرة كاملة تجمع بين CSS وHTML المعدل لتحسين الوضوح:
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
الخاتمة
من خلال اتباع الخطوات أعلاه، يمكنك ضمان كسر الكلمات بشكل مناسب عند الواصلات، مما يؤدي إلى تجربة أكثر ملاءمة للمستخدم. استخدام الواصلات اللينة هو استراتيجية بسيطة وفعالة ستجعل محتوى نصك أسهل بكثير في القراءة.
لا تتردد في تنفيذ هذه الطريقة في مشروع تصميم الويب التالي الخاص بك - سيقدر المستخدمون تخطيط النص المحسن!