وضع مسافة بادئة للأسطر اللاحقة لنص التسمية الملفوفة

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

لإنشاء مسافة بادئة للأسطر الثانية والخطوط اللاحقة باستخدام CSS فقط، فكر في استخدام الطريقة التالية:

قم بإحاطة كل من عنصر الإدخال والتسمية الخاصة به داخل الحاوية الأصلية بالفئة "checkbox-field". قم بتعيين خاصية العرض لهذا الأصل على "flex" والاتجاه المرن إلى "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

مثال للاستخدام:

  
  Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem

يقوم هذا الحل بضبط نص التسمية بمرونة على العرض المتاح مع الحفاظ على المظهر المرئي المتسق.