כיצד לשנות גלישת טקסט ברירת מחדל עם HTML ו - CSS

שלא כמו נייר, דפי אינטרנט יכולים כמעט אינסופית להאריך הצדה. ככל מרשים כלומר, זה לא משהו שאנחנו באמת צריכים בעת הקריאה. דפדפני גלישת טקסט בהתאם רוחב של מיכל הטקסט וה רוחב המסך כך שנוכל לראות את כל הטקסט מבלי לגלול הצדה הרבה (רק כלפי מטה).

עטיפה הוא משהו הדפדפנים לעשות בהתחשב בגורמים רבים, כגון שפת הטקסט או את המיקום של פיסוק רווחים - הם לא רק לדחוף למטה מה לא מתאים בתיבה המוגדרת עבור תוכן הטקסט.

מלבד גלישת, דפדפנים גם לטפל בחללים; הם למזג מספר רב של רווחים רצופים בקוד המקור לתוך שטח אחד בודד על הדף שניתנו, והם גם לרשום הפסקות קו מאולץ לפני תחילת העבודה על גלישת.

מתי לשנות את גלישת הטקסט המוגדרת כברירת מחדל

כל זה נהדר, והערכה רבה. אבל, אנחנו יכולים בקלות בסופו של דבר בנסיבות שבהן התנהגות דפדפן ברירת המחדל היא לא מה שאנחנו מחפשים. זה יכול להיות כותרת לא צריך להיות עטוף או מילה בפסקה זו עדיף להישבר מאשר לרדת לקו, והשאיר מקום ריק, מוזר למראה, בקצה הקו.

זה יכול לקרות גם כי אנחנו פשוט נואשות צריך רווחים אלה נשמרים בטקסט שלנו, עם זאת, הדפדפן שומר אותם לתוך אחד, מכריח אותנו להוסיף מרובים בקוד המקור.

העדפות גלישת יכול גם לשנות את השפה ואת המטרה של הטקסט. מאמר חדשותי מנדרינית ושיר צרפתי לא בהכרח צריך להיות עטוף בדיוק באותו אופן.

יש מספר לא מבוטל של תכונות CSS (ואלמנטים של HTML!) שיכולים לשלוט על גלישת ואת breakpoints וגם להגדיר כיצד רווחים מעברי שורה מעובדים לפני גלישת.

רך לעטוף הזדמנויות & רכה לעטוף מעברי

דפדפנים מחליטים היכן לעטוף טקסט עולה על גדותיו בהתאם לגבולות מילים, מקפים, הברות, סימני פיסוק, רווחים ועוד. כל המקומות האלה נקראים רך לעטוף הזדמנויות וכאשר הדפדפן עושה את הטקסט במקום אחד כזה, הפסקה נקראת א עטיפה רכה.

הדרך הפשוטה ביותר כוח הפסקה נוספת ניתן לעשות זאת באמצעות הישן טוב
אלמנט.

רווח לבן

אם אתה מכיר את חלל לבן נכס CSS אני בטוח שבאת לראשונה לדעת את זה באותו אופן כמו רבים אחרים; תוך חיפוש אחר דרך למנוע את גלישת הטקסט. ה nowrap ערך של חלל לבן עושה בדיוק את זה.

אולם, ה חלל לבן הנכס הוא על יותר מאשר רק גלישת. קודם כל, מה זה שטח לבן? זה קבוצה של תווים בחלל. כל מקום במערך משתנה זה מזה באורך, בכיוון, או בשניהם.

טיפוסית תו רווח אופקי יחיד הוא מה שאנחנו מוסיפים על ידי לחיצה על מקש הרווח. מקש Tab מוסיף גם שטח דומה אבל עם אורך גדול יותר. הזן מפתח מוסיף מרחב אנכי כדי להתחיל קו חדש, ו ב HTML מוסיף שטח אחד לא שביר אל דפי אינטרנט. כמו זה, ישנם סוגים רבים של רווחים המהווים “רווח לבן”.

כפי שציינתי בהתחלה, דפדפנים לכווץ רווחים מרובים (אופקי ואנכי) במקור למרחב אחד. גם הם לשקול את התווים שטח עבור הזדמנויות גלישה (מקומות שבהם טקסט יכול להיות עטוף) בעת גלישת יש צורך.

ודווקא פעולות הדפדפן האלה שאנחנו יכולים לשלוט בהן חלל לבן. שים לב כי חלל לבן רכוש אינו משפיע על כל מיני מקום, רק את אלה הנפוצים ביותר כגון החלל הבודד האופקי הרגיל, שטח הלשונית והזנות שורה.

למטה, תוכל לראות צילום מסך של טקסט לדוגמה עטוף על ידי הדפדפן כדי להתאים בתוך המיכל שלה. הגלישה מתרחשת בתחתית המכולה והטקסט העולה על גדותיו צבוע בצורה שונה. אתה שם לב קריסה של רווחים רצופים בקוד.

 
 ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום א¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. 

 .textContainer width: 500px; גובה: 320px;  

לאחר החלת White-space: nowrap; הכלל, גלישת הטקסט משתנה באופן הבא:

 .textContainer / * ... * / white-space: nowrap;  

ה טרום ערך של חלל לבן משמר את כל החללים ו מונע את גלישת הטקסטYou

 .textContainer / * ... * / white-space: pre;  

ה מראש לעטוף ערך של חלל לבן משמר את כל החללים ו עוטף את הטקסטYou

 .textContainer / * ... * / white-space: pre-wrap;  

סוף - סוף, ה מראש שורה ערך של חלל לבן משמר את המרחבים האנכיים כגון שורות חדשות עוטף את הטקסטYou

 .textContainer / * ... * / white-space: pre-line;  

מילה מעברי

עוד נכס חשוב CSS אתה צריך לדעת על השליטה טקסט לעטוף הוא מילה הפסקה. אתה יכול לראות את כל צילומי מסך לעיל כי הדפדפן עטף את הטקסט לפני המילה “שלום” בצד ימין, שמעבר לו טקסט גולש. הדפדפן לא שבר את המילה.

עם זאת, אם אתה חייב אפשר לשבור אותיות במילה אחת כך שהטקסט ייראה אפילו בצד ימין אתה צריך להשתמש לשבור את כל ערך עבור מילה הפסקה נכס:

 .textContainer / * ... * / word-break: break-all;  

ה מילה הפסקה רכוש יש ערך שלישי מלבד לשבור את כל ו רגיל (השייכות לשבר שורת ברירת המחדל). ה לשמור הכל ערך אינו מאפשר שבירת מילים.

ייתכן שלא תוכל לראות את ההשפעה של לשמור הכל באנגלית. אבל, בשפות שבהן האותיות במילה הן יחידות משמעותיות בפני עצמן, הדפדפן עלול לשבור את המילים בעת גלישת, ואת זה ניתן למנוע באמצעות לשמור הכל.

לדוגמה, אותיות במלים קוריאניות, שבור בתחילה עבור גלישת, נשמרים יחד כאשר לבן שטח: לשמור הכל; הכלל מוגדר.

ד¬Â ??¸דªÂ³Â ?? à «Â¥Â¼ à   ¥à  ?? ?? ?? à  ?? ?? ד  ?? ??, ד¬Â ??  à  ?? ?? ??¬Â½Ã ?? à «â ?? ?? ?? ë ¡??   ?? ?? ??¬Â ?? ד¬Â ?? ?? ד¬Â ??¤. ד¬Â ?? ?? ?? ?? ?? ?? ד¬Â ??  à  ?? ?? ??¬Â½Ã ?? à  ?? ?? ?? דªÂµÂ- ד¬Â ??   ?? ?? ??¬Â ?? ?? דª° ?? 1997 «« ... ?? 3 ד¬?? ?? 10 א¬Â ??¼Ã «Â¶Â ??  â ?? ?? 12 °¬Â ??¼דªÂ¹Ã ?? ד¬Â§??  «Â ??  ... ד¬Â ??¼ד¬?? ?? à «Â§Ã ?? ד¬Â ??¸ד¬Â¦Ã ?? ד¬Â  ?? ד¬?? ?? ד¬Â ´à «Â¦Â½Ã  ?? ?? ד  ?? ¤. ד¬Â§Ã ?? דªÂ¸?? à «Â ±  ± ë ¡à ??  ?? ?? ??¬Â ?? ד¬Â ?? ?? ד¬Â ??¤. ד¬Â ??´   ?? ?? ??¬Â ?? ?? ד¬Â  ?? ד¬Â ?? ?? ??  ?? ?? ?? ד¬Â  ... דªÂ³?? ד¬Â  ?? à «Â ° ?? ד¬?? ?? ד¬Â ?? ?? à «Â¬Â¸דª° â ?? à «â ?? ??¤ד¬Â ??´   ?? ??¨דªÂ »?? à «ÂªÂ¨ד¬Â ¬ ד «Â ??¤ד¬Â ?? ?? דªÂ³Â¼ דª° ?? ד¬?? ?? à «Â¶Ã ?? ד¬Â ??¼Ã «Â¥Â¼ ד «Â ??¤Ã «Â £ ¹à  ?? ?? ד  ?? ¤.

 .textContainer / * ... * / word-break: keep-all;  

מאפיין זה עשוי לתמוך בערך נוסף הנקרא לשבור מילה בעתיד. תראה איך לשבור מילה עובד מאוחר יותר, ב “גלישת גלישה” סעיף זה.

הזדמנויות לשבור מילים

מפתחים יכולים גם להוסיף הזדמנויות לעטוף בתוך מילים, משתמש ב אלמנט HTML. אם הדפדפן צריך לעטוף מחרוזת טקסט זה ישקול את המקום שבו קיים עבור הזדמנות גלישת.

 
 ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? חello¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. ד¢?? ?? שלום. 
 

 .textContainer / * ... * / white-space: pre-wrap;  

בלי , הכל “שלום” מילה היתה ניתנת בשורה חדשה. על ידי הוספה אל קוד ה- HTML, הודענו לדפדפן כי זה בסדר לשבור את המילה בשלב זה לעטוף, למקרה שזה נחוץ.

מקפים

ה מקפים מאפיין CSS הוא דרך נוספת לשלוט על הפסקות בין אותיות במילה. יש לנו מאמר נפרד על מקף CSS אם אתה מעוניין. בקיצור, הנכס מאפשר לך ליצור הזדמנויות גלישת באמצעות מקף.

שלה אוטומטי הערך מבקש את הדפדפן מקף אוטומטי לשבור מילים במידת הצורך בעוד גלישת. ה מדריך ל הערך כוחות דפדפנים ל לעטוף (אם יש צורך) על הזדמנויות המיקוף הוסיף על ידינו, כגון תו המקף (‐) או ­ (מקף רך). אם אף אחד ניתנה כערך שיהיה לא עוטף ליד hyphens.

 
 כחולים כחולים כחולים כחולים כחולים כחולים כחולים כחולים 
 

 .textContainer / * ... * / -webkit-hyphens: אוטומטי; -ms-hyphens: auto; מקפים: אוטומטי;  

גלישת גלישה

ה גלישת- overflow מאפיין CSS שולט אם הדפדפן עלול לשבור מילים (או רווחים משומרים, תמיכה אשר עשויה לקרות בעתיד הקרוב) על גלישה. כאשר לשבור מילה הערך ניתן עבור גלישת- overflow, המילה יהיה שבור במקרה לא למצוא הזדמנויות אחרות לעטוף רך בשורה.

שים לב ש גלישת- overflow ידוע גם בשם עטיפת מילה (הם כינויים).

 
 בית המלון מבחוץ 
 

 .textContainer / * ... * / overflow-wrap: break-word;  

ללא רווח בין האותיות בקוד ה- HTML לעיל (כלומר, אין הזדמנויות גלישה), הטקסט לא היה עטוף בהתחלה השתמר כמילה אחת.

עם זאת, כאשר ניתנה רשות לעטוף את הטקסט על ידי שבירת מילים (כלומר לשבור מילה הערך ניתן גלישת- overflow), ה עטיפה קרה על ידי שבירת כל החוט בכל מקום שנדרש.