هل يمكن لـ CSS إحداث فواصل أسطر بعد كل كلمة في عنصر؟

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

هل هناك حل CSS لفرض فواصل الأسطر بعد كل كلمة في عنصر، بغض النظر عن طول الكلمة؟

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

حل CSS: تباعد الكلمات ومعالجة الحاويات

لتحقيق تأثير فاصل الأسطر المطلوب، استخدم خصائص CSS التالية:

.one -كلمة لكل سطر { تباعد الكلمات: ؛ } اسم الفصل الخاص بك { العرض: الحد الأدنى الجوهري؛ العرض: -webkit-min-content؛ العرض: -moz-min-content؛ العرض: المحتوى الأدنى؛ العرض: تسمية توضيحية للجدول؛ العرض: -ms-grid؛ -ms-grid-columns: الحد الأدنى للمحتوى؛

.one-word-per-line {
    word-spacing: ; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

في هذا النهج، تتحكم فئة .one-word-per-line في التباعد بين الكلمات (تباعد الكلمات)، مما يؤدي بشكل فعال إلى دفع كل كلمة إلى السطر الخاص بها. تقوم فئة .your-classname بتعيين خصائص العرض والعرض المختلفة التي تضمن أن يكون عرض الحاوية دائمًا عريضًا بما يكفي لاستيعاب حتى حرف واحد، وبالتالي تشغيل فواصل الأسطر عند الضرورة.