יש דרכים רבות להתמודד עם תוכן המוזן לתוך תגיות שונות (כגון p , span ועוד..). לדוגמה אם ניכח תגית המוכרת לכולנו, <p/><p> ונתחיל לסדר בה את התוכן, נשמור על רווחי שורה , שורות קצרות וכל נקודה יהיה רווח של שורה כיעה לפסקה וידה ידה ידה.. ואז שנטען את זה בדפדפן. נקבל גוש של טקסט שהתעלם לחלוטין מהסידור המושגע שלנו.
אז מה אפשר לעשות ?? טריק נחמד לסידור טקסט בHTML בעזרת תגית <pre>!
כל מה שהתגית הזו עושה, למעשה היא פולטת את התוכן כתוכן של HTML הכי בסיסי שיש . תגית pre למעשה היא קיצור של preformatted.
שימו לב לדוגמה הזו, הטקסט יוצג בדיוק באותו הצורה וישמור על הרווחים והשורות הקצרות. מה שתגיות אחרות לא היו מאפשרות והיו פשוט מציגות את זה כגוש טקסט כמו בדוגמה שמוצגת פה:
<pre> לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק. </pre> <!--הפלט יהיה זהה לסידור הזה בדיוק --> <p> לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק. </p> <!-- :הפלט יראה כך לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק. ** כמובן שהשורות רק ישברו בהתאם לרוב הדף או התגית העוטפת -->
אבל pre לא מושלם ויש לתת לו קצת css בכדי לקבל את התוצאה הרצויה, כי התיג מתעלמת לחלוטין מכל עיצוב כלשהו שנתתם לדף ולכן צריך להגדיר לה באופן אישי, בנוסף יהיה עליכם להוסיף גם למשל:
pre {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
white-space: pre-line; /* זאת חשובה אחרת התוכן יגלוש */
}
תגית זו שימושית אך כמעט ולא משתמשים בה . אבל לעיתים נתקלים במקרים חריגים כמו סידור טקסטים בתוך תגית ואז הטריק הזה שימושי . בהצלחה 🐲
