בשפות רבות שנכתבות, אפשר להפריד בין שורות בין הברות וגם בין מילים. הדבר נעשה לעיתים קרובות כדי שאפשר יהיה להציב יותר תווים בשורת טקסט, וכך להקטין את מספר השורות באזור הטקסט וכתוצאה מכך לחסוך מקום. בשפות כאלה, ההפסקה מסומנת באופן חזותי באמצעות מקף (-).
ב-CSS Text Module Level 3 מוגדר מאפיין מקפים כדי לקבוע מתי מקפים יוצגו למשתמשים ואיך הם יתנהגו כשהם יוצגו. החל מגרסה 55, Chrome מטמיע את המאפיין hyphens.
לפי המפרט, למאפיין מקפים יש שלושה ערכים: none, manual ו-auto. כדי להמחיש זאת, צריך להשתמש מקף רך (­) כמו בדוגמה הבאה.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
מקף רך הוא מקף שמוצג רק כשהוא מופיע בשוליים העליונים. האופן שבו מקלידים מקף ב-Chrome מגרסה 55 ואילך תלוי בערך של מאפיין ה-CSS hypens.
-webkit-hyphens: manual;
hyphens: manual;
השילוב שלהם נותן תוצאה כזו:
שימו לב שהקו המתחכך לא גלוי. בכל המקרים, אם מילה שמכילה מקף רך נכנסת לשורה אחת, המקף יהיה בלתי נראה. עכשיו נראה איך מתנהגים כל שלושת הערכים של מקף.
ללא שימוש
בדוגמה הראשונה, המאפיין hyphens מוגדר כ-none. כך לא יוצג לעולם מקף רך. כדי לוודא זאת, משנים את גודל החלון כך שהמילה 'elit' לא תתאים לקו הטקסט הגלוי.
שימוש במדריך
בדוגמה השנייה, המאפיין hyphens מוגדר כ-manual, כלומר המקף הרך יופיע רק כשהשוליים יפרקו את המילה 'elit'. שוב, אפשר לאשר זאת על ידי שינוי גודל החלון.
שימוש ב-auto
בדוגמה השלישית, המאפיין hyphens מוגדר כ-auto. במקרה כזה, אין צורך בקו מקף רך כי סוכן המשתמש יקבע את מיקומי הקווים המקפים באופן אוטומטי. אם תשנו את גודל החלון, תראו שהדפדפן מוסיף מקף לדוגמה הזו באותו מקום שבו הוא מוסיף מקף לדוגמה השנייה, אבל לא מופיע מקף רך. אם תמשיכו לכווץ את החלון, תראו שהדפדפן יכול לפצל שורות בין כל שתי הברות בטקסט.