خط فاصله را با CSS مدیریت کنید

جو مدلی
Joe Medley

در بسیاری از زبان های نوشتاری، این امکان وجود دارد که خطوط بین هجاها و همچنین بین کلمات را بشکنید. این کار اغلب به این دلیل انجام می شود که ممکن است کاراکترهای بیشتری روی یک خط متن قرار گیرند و هدف آن این است که خطوط کمتری در یک قسمت متن داشته باشند و در نتیجه فضا ذخیره شود. در چنین زبان هایی، شکست به صورت بصری با خط فاصله ('-') نشان داده می شود.

ماژول متنی CSS سطح 3 یک ویژگی خط تیره را برای کنترل زمان نمایش خط تیره به کاربران و نحوه رفتار آنها در هنگام نمایش تعریف می کند. با شروع نسخه 55، Chrome ویژگی خط تیره را پیاده سازی می کند. طبق مشخصات، ویژگی خط تیره دارای سه مقدار است: none ، manual و auto . برای نشان دادن این موضوع باید مانند مثال زیر از خط تیره نرم ( ­ ) استفاده کنیم.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

خط تیره نرم خطی است که فقط زمانی نشان داده می شود که در حاشیه انتهایی رخ دهد. نحوه نمایش این خط فاصله در Chrome 55 یا جدیدتر به مقدار ویژگی CSS hypens بستگی دارد.

-webkit-hyphens: manual;
hyphens: manual;

ترکیب اینها نتیجه ای شبیه به زیر می دهد:

اسکرین شات تک خطی

توجه داشته باشید که خط تیره نرم قابل مشاهده نیست. در همه موارد، زمانی که کلمه ای حاوی خط تیره نرم روی یک خط قرار می گیرد، خط تیره نامرئی خواهد بود. حال، بیایید ببینیم که هر سه مقدار خط فاصله چگونه رفتار می کنند.

استفاده از هیچکدام

در مثال اول، ویژگی خط تیره روی none تنظیم شده است. این مانع از نمایش خط تیره نرم می شود. شما می توانید این را با تنظیم اندازه پنجره تایید کنید تا کلمه "elit" در خط قابل مشاهده متن قرار نگیرد.

Google ipsum dolor sit amet، consectetur adipiscing elit.

استفاده از کتابچه راهنمای کاربر

در مثال دوم، ویژگی خط تیره روی manual تنظیم شده است، به این معنی که خط تیره نرم تنها زمانی ظاهر می شود که حاشیه کلمه "elit" را بشکند. باز هم می‌توانید این موضوع را با تنظیم اندازه پنجره تأیید کنید.

Google ipsum dolor sit amet، consectetur adipiscing elit.

با استفاده از خودکار

در مثال سوم، ویژگی خط تیره روی auto تنظیم شده است. در این مورد، هیچ خط خطی نرم لازم نیست زیرا عامل کاربر به طور خودکار مکان خط فاصله را تعیین می کند. اگر اندازه پنجره را تغییر دهید، خواهید دید که مرورگر این مثال را در همان مکان دوم خط خط خطی می کند، اگرچه هیچ خط فاصله نرم وجود ندارد. اگر به کوچک کردن پنجره ادامه دهید، خواهید دید که مرورگر شما قادر به شکستن خطوط بین هر دو هجا در متن است.

Google ipsum dolor sit amet، consectetur adipiscing elit.