പുതിയ വരി css-ലേക്ക് പോകുക. HTML ലെ ലൈൻ ബ്രേക്ക്: br ടാഗ് ഉപയോഗിക്കുക

പലപ്പോഴും ഒരു പുതിയ ഖണ്ഡിക ചേർക്കേണ്ട ആവശ്യമുണ്ട്, പക്ഷേ ഖണ്ഡിക ടാഗ് ചേർക്കുന്ന ശൂന്യമായ വരി ഇല്ലാതെ

ചില ടെക്‌സ്‌റ്റ് ശകലങ്ങൾക്ക്, സാധാരണ പാരഗ്രാഫ് സ്‌പെയ്‌സിംഗ് അനുചിതമാണ്. ഇവ ചിത്രങ്ങൾക്ക് കീഴിലും പട്ടികകളിലും കവിതകളിലും ഉദ്ധരണികളിലും അടിക്കുറിപ്പുകളിലും കുറിപ്പുകളിലും ലിഖിതങ്ങളാകാം.

ലൈൻ ബ്രേക്കുകൾ നിർബന്ധിക്കാൻ, ഒരു പ്രത്യേക ടാഗ് നൽകിയിട്ടുണ്ട്, അതിന്റെ പ്രവർത്തനം അതിന്റെ പേരിൽ അടങ്ങിയിരിക്കുന്നു br (ബ്രേക്ക് റോ - "ഒരു വരി തകർക്കുക, ലൈൻ"). ടാഗ് ചെയ്യുക
ഹൈപ്പർടെക്‌സ്‌റ്റ് മാർക്ക്അപ്പ് ലാംഗ്വേജ് (HTML) അർത്ഥമാക്കുന്നത് അതിനെ പിന്തുടരുന്ന എല്ലാ ഉള്ളടക്കവും ഒരു പുതിയ ലൈനിൽ ആരംഭിക്കണം എന്നാണ്. ആവശ്യമെങ്കിൽ, ആവശ്യമായ സ്പെയ്സിംഗ് നേടുന്നതിന് നിങ്ങൾക്ക് നിരവധി ടാഗുകൾ ഒരു വരിയിൽ ചേർക്കാവുന്നതാണ്.

ടാഗ് ചെയ്യുക
ഇത് കേസ് സെൻസിറ്റീവ് അല്ല, കൂടാതെ ഒരു ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല, കാരണം ഇത് ഒരു ശൂന്യമായ ഘടകമാണ്, എന്നാൽ എല്ലാ ടാഗുകളും അടയ്ക്കുന്നത് ശീലമാക്കുന്നതാണ് നല്ലത്. XHTML-ൽ, ബ്രേക്ക് ടാഗ് ഒരു ബാക്ക്സ്ലാഷ് ഉപയോഗിച്ച് "അടച്ചിരിക്കണം".

ഒരു ബ്രേക്ക് ടാഗ് ഉപയോഗിക്കുന്നതിന്റെ ഉദാഹരണം

ബി.ആർ ടാഗ് പ്രവർത്തനത്തിലാണ്< /title></p><p><р>ജോലിയിൽ നിന്ന് വിട്ടുനിൽക്കൽ</р></p><p><p>മറ്റൊരിടത്തും ഒരിക്കലും <br></p><p>ഞാൻ അത്ര മോശമായിരുന്നില്ല <br></p><p>മുതലാളിമാർ അത്യാഗ്രഹികളായ ഒരു കൂട്ടമാണ് <br></p><p>എന്നെ ജീവനോടെ കടിച്ചുകീറി</р></p><p>ജോലിയിൽ നിന്ന് വിട്ടുനിൽക്കൽ</p><p>മറ്റൊരിടത്തും ഒരിക്കലുമില്ല <br>ഞാൻ അത്ര മോശമായിരുന്നില്ല. <br>മുതലാളിമാർ അത്യാഗ്രഹികളായ ഒരു കൂട്ടമാണ് <br>എന്നെ ജീവനോടെ നക്കി.</p><h2>ടാഗ് ആട്രിബ്യൂട്ട് <br></h2><p>ഒരു html ടാഗിനുള്ള ഒരേയൊരു ആട്രിബ്യൂട്ട് <br>, എന്ന് വിളിക്കപ്പെടുന്ന വാചകം ഫ്ലോട്ടിംഗ് എലമെന്റ് എന്ന് വിളിക്കപ്പെടുന്ന ഒരു ഘടകത്തിന് ചുറ്റും പൊതിയേണ്ടി വന്നാൽ ലൈൻ റാപ്പ് ഉപയോഗിച്ച് എന്തുചെയ്യണമെന്ന് ഇത് ബ്രൗസറിനോട് പറയുന്നു, ഉദാഹരണത്തിന്, വലത്/ഇടത് മൂല്യങ്ങൾ ഉപയോഗിച്ച് വിന്യസിക്കുന്ന ആട്രിബ്യൂട്ടുള്ള ഒരു ഇമേജ് അല്ലെങ്കിൽ CSS-ലെ ഒരു ബ്ലോക്ക് അതിന് ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉണ്ട്.</p><p>XHTML 1.0 / HTML 4.01 സ്പെസിഫിക്കേഷനുകളിൽ, വ്യക്തമായ ആട്രിബ്യൂട്ട് ട്രാൻസിഷണൽ, ഫ്രെയിംസെറ്റ്, കൂടാതെ<!DOCTYPE>, അല്ലെങ്കിൽ കോഡ് പ്രവർത്തിക്കില്ല.</p><h2>ആട്രിബ്യൂട്ട് പ്രോപ്പർട്ടികൾ ടാഗ് ചെയ്യുക</h2><p>വ്യക്തമായ ആട്രിബ്യൂട്ടിന്റെ പ്രഭാവം അതിന്റെ മൂല്യത്തെയും ഫ്ലോട്ടഡ് മൂലകത്തിന്റെ സ്ഥാനത്തെയും ആശ്രയിച്ചിരിക്കുന്നു. ആട്രിബ്യൂട്ടിന് 4 മൂല്യങ്ങൾ എടുക്കാം:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>ഇടത് മൂല്യം ഇടത് വിന്യസിച്ച ഘടകത്തെ പൊതിയുന്നതിൽ നിന്ന് തടയുന്നു, അതിനാൽ ടെക്സ്റ്റ് ടാഗിന് മുകളിലൂടെ സഞ്ചരിക്കും <br>, ചിത്രം അല്ലെങ്കിൽ മറ്റ് ഫ്ലോട്ടിംഗ് ഘടകത്തിന് താഴെയായി സ്ഥിതിചെയ്യും.</p><p>എല്ലാ ആർഗ്യുമെന്റുകളും ഉപയോഗിക്കുന്നതിലൂടെ കൃത്യമായ അതേ ഫലം ലഭിക്കും, അത് ഒരിക്കലും വലത്തേക്കോ ഇടത്തേക്കോ അനുവദിക്കില്ല.</p><p>വലത് വിന്യസിച്ച ഘടകത്തിന് ചുറ്റും വാചകം പൊതിയുന്നതിൽ നിന്ന് ശരിയായ മൂല്യം തടയുന്നു, അതിനാൽ ടാഗിന് ശേഷം <br>വാചകത്തിന് ചിത്രത്തിന് ചുറ്റും വലത്തേക്ക് ഒഴുകുകയല്ലാതെ മറ്റൊരു മാർഗവുമില്ല.</p><p>മൂല്യം ഒന്നുമില്ല ("നിങ്ങളുടേതോ ഞങ്ങളുടേതോ അല്ല") പൊതുവെ വ്യക്തമായ ആട്രിബ്യൂട്ടിൽ നിന്നും ടാഗിൽ നിന്നും എല്ലാ ശക്തികളെയും നീക്കം ചെയ്യുന്നു <br>നിശബ്ദമായി വരി താഴേക്ക് നീക്കുന്നു.</p><p>ടാഗിന്റെ വ്യക്തമായ ആട്രിബ്യൂട്ടിന് ഒരു ഡിഫോൾട്ട് മൂല്യം ഇല്ല.</p><h2>ടാഗ് ചെയ്യുക <br>- ഇതൊരു മൃദു കൈമാറ്റമാണ്</h2><p>ഖണ്ഡികകൾക്കിടയിൽ ആവശ്യമായ സ്‌പെയ്‌സിംഗ് സൃഷ്‌ടിക്കുന്നതിന് ലൈൻ ബ്രേക്ക് ടാഗ് വളരെ ഉപയോഗപ്രദമാണ്, അതിനുള്ളിൽ ഇത് ഒരു സോഫ്റ്റ് ബ്രേക്ക് ആയി ഉപയോഗിക്കുന്നു, പക്ഷേ ടെക്‌സ്‌റ്റ് ഖണ്ഡികകളായി വിഭജിക്കുന്നതിനുള്ള ഒരു മാർഗമായിട്ടല്ല.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>ടെക്‌സ്‌റ്റ് ഫോർമാറ്റ് ചെയ്യുന്നതിനുള്ള പുതിയ ലൈൻ ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾ വളരെയധികം കടന്നുപോകരുത്, കാരണം അത് ഉപയോഗിക്കുന്നതിന്റെ ഫലങ്ങൾ എല്ലായ്പ്പോഴും മനോഹരമല്ല.</p><p>ഉദാഹരണത്തിന്, നിങ്ങൾ ടാഗ് ഉപയോഗിക്കുകയാണെങ്കിൽ <br>ഒരു ഖണ്ഡികയ്ക്കുള്ളിലെ വരികൾ തകർക്കാൻ, വെബ്‌മാസ്റ്റർ ലക്ഷ്യമിടുന്ന വിൻഡോയേക്കാൾ ചെറുതാണെങ്കിൽ ഉപയോക്താവിന്റെ വിൻഡോയിൽ ഒരു "ചീപ്പ്" പ്രത്യക്ഷപ്പെടുന്നതിന് ഇത് കാരണമായേക്കാം.</p> <p>ഞങ്ങൾ CSS3-ന്റെ കഴിവുകൾ പര്യവേക്ഷണം ചെയ്യുന്നത് തുടരുന്നു, അടുത്തത് വേഡ് റാപ്പിംഗാണ്. വേഡ് റാപ്പിംഗ് വളരെ ഉപയോഗപ്രദമായ ഒരു സവിശേഷതയാണ്, കാരണം ഇത് പേജിൽ ടെക്‌സ്‌റ്റ് മനോഹരമായി കാണപ്പെടുന്നു. കൂടാതെ, ചിലപ്പോൾ നിങ്ങൾ പത്രങ്ങളിൽ പോലെ കോളങ്ങൾ ഉണ്ടാക്കണം, തുടർന്ന് വലത് അല്ലെങ്കിൽ ഇടത് വിന്യാസം വൃത്തികെട്ടതായി തോന്നുന്നു. എന്നാൽ നിങ്ങൾ അത് നിരയുടെ മുഴുവൻ വീതിയിലും നീട്ടുകയാണെങ്കിൽ, അത്തരം വാചകം വായിക്കുന്നത് കണ്ണിന് കൂടുതൽ മനോഹരമാകും. എന്നാൽ ഈ സാഹചര്യത്തിൽ പോലും, വാക്കുകൾക്കിടയിൽ വലിയ ഇടങ്ങൾ പോലുള്ള ഒരു സൂക്ഷ്മതയുണ്ട്, അത് വൃത്തികെട്ടതായി തോന്നുന്നു. ഇതാണ് ഈ പാഠത്തിൽ ഞങ്ങൾ തിരുത്തുന്നത്.</p><p>CSS3 സവിശേഷതകൾ:</p><p>മുകളിൽ ഞാൻ നിങ്ങൾക്കായി തിരഞ്ഞെടുത്ത ലേഖനം പഠിക്കുന്നതിലൂടെ, നിങ്ങൾ ധാരാളം ഉപയോഗപ്രദമായ പ്രോപ്പർട്ടികൾ പഠിക്കും, കൂടാതെ CSS3 ന്റെ പുതിയ സവിശേഷതകളെ കുറിച്ച് പഠിക്കുകയും ചെയ്യും, ഇത് സൈറ്റിൽ കുറച്ച് ചിത്രങ്ങൾ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.</p><h2>വേഡ് ഹൈഫനേഷൻ സൃഷ്ടിക്കുക</h2><h3>ഹൈഫനുകളില്ലാത്ത വാചകം</h3><p>നമ്മൾ എന്താണ് സംസാരിക്കുന്നതെന്ന് ആർക്കെങ്കിലും മനസ്സിലാകുന്നില്ലെങ്കിൽ, വേഡ് ഹൈഫനേഷൻ ഉപയോഗിക്കാതെ ഒരു ഉദാഹരണം ഇതാ:</p><h3>ഹൈഫനുകൾക്കൊപ്പം</h3><p>ഞങ്ങൾ CSS വേഡ് റാപ്പ് ഉപയോഗിക്കുന്ന ഒരു ഉദാഹരണം ഇതാ:</p><h3>അടിപൊളി! കോഡിൽ ഇത് എങ്ങനെ ചെയ്യാം?</h3><p>ഇപ്പോൾ, ഞങ്ങൾ എന്തുചെയ്യുമെന്ന് എല്ലാവർക്കും നന്നായി മനസ്സിലായെന്ന് ഞാൻ കരുതുന്നു. അതിനാൽ CSS3-ന്റെ പുതിയ പ്രോപ്പർട്ടിയെക്കുറിച്ച് അറിയാനുള്ള സമയമാണിത്!</p><p>ഈ പ്രോപ്പർട്ടി ഇതുപോലെ എഴുതിയിരിക്കുന്നു - ഹൈഫനുകൾ.</p><p>ലളിതം, അല്ലേ? എന്നാൽ ഓരോ ബ്രൗസറിനും അതിന്റേതായ പ്രിഫിക്സുകൾ ഉണ്ട്, അതിനാൽ കോഡിൽ ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:</p><p>ടെക്സ്റ്റ് അലൈൻ ഉപയോഗിച്ച് ബ്ലോക്കിന്റെ മുഴുവൻ വീതിയിലും ടെക്സ്റ്റ് നീട്ടാൻ മറക്കരുത്: പ്രോപ്പർട്ടി ന്യായീകരിക്കുക, അല്ലാത്തപക്ഷം നിങ്ങൾ ആഗ്രഹിച്ച ഫലം കാണില്ല.</p> <p>പാഠം 5.</p><h1></h1> <p>ഈ പാഠത്തിൽ ഞങ്ങൾ: <br>1. html കോഡ് കൂടുതൽ സൗകര്യപ്രദവും നമുക്ക് വായിക്കാൻ എളുപ്പവുമാക്കുന്നത് എങ്ങനെയെന്ന് നോക്കാം. <br>2. ഒരു ടെക്സ്റ്റ് ലൈൻ എങ്ങനെ ശരിയായി പൊതിയാമെന്ന് നോക്കാം.</p> <h2>html കോഡ് സൗകര്യപ്രദമാക്കുന്നു.</h2> <p>ഇപ്പോൾ ഞങ്ങളുടെ കോഡ് വ്യക്തവും വായിക്കാൻ എളുപ്പവുമാണ്, കാരണം കുറച്ച് വാചകവും പ്രായോഗികമായി ടാഗുകളൊന്നുമില്ല. നമ്മൾ കൂടുതൽ സങ്കീർണ്ണമായ ഒരു പേജ് സൃഷ്ടിക്കുമ്പോൾ, നിരവധി ടാഗുകൾ ഉണ്ടാകും, അതിനാൽ ശരിയായത് കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടായിരിക്കും.</p> <p>ടാഗുകളുടെ കുഴപ്പം ഒഴിവാക്കാൻ, നിങ്ങൾ ആദ്യം ടാഗുകളും ലൈനുകളും ക്രമീകരിക്കേണ്ടതുണ്ട്, അങ്ങനെ അവ ദൃശ്യപരമായി എളുപ്പത്തിൽ മനസ്സിലാക്കാൻ കഴിയും. ബ്രൗസർ ഒരു html പേജിൽ നിന്നുള്ള വിവരങ്ങൾ വായിക്കുമ്പോൾ, കോഡിൽ എത്ര സ്‌പെയ്‌സുകളോ ശൂന്യമായ വരികളോ ഉണ്ടെന്നത് പ്രശ്‌നമല്ല.</p> <p>ഞങ്ങൾ സൃഷ്ടിച്ചതിന് ആപേക്ഷികമായി പേജ് കോഡിലെ വാചകം ഞാൻ മാറ്റി, പക്ഷേ അത് പ്രശ്നമല്ല. ഇടതും വലതും ചിത്രങ്ങൾ ഒരേ കോഡ് കാണിക്കുന്നു. രണ്ട് ഓപ്ഷനുകളും മോണിറ്റർ സ്ക്രീനിൽ ബ്രൗസർ ഒരേപോലെ പ്രദർശിപ്പിക്കും. സമ്മതിക്കുക, വലതുവശത്ത് കാണിച്ചിരിക്കുന്ന കോഡ് ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നത് ഇടതുവശത്തുള്ളതിനേക്കാൾ വളരെ എളുപ്പമായിരിക്കും.</p> <p>നമ്മൾ നോക്കുന്ന കോഡ് വളരെ ലളിതമാണ്, എന്നാൽ ഇപ്പോൾ പോലും വിഷ്വൽ പെർസെപ്ഷനിലെ വ്യത്യാസം ശ്രദ്ധേയമാണ്. “കാര്യങ്ങൾ ക്രമീകരിക്കുന്നതിന്” പ്രത്യേക നിയമങ്ങളൊന്നുമില്ല; ഓരോ യജമാനനും തനിക്ക് ജോലി ചെയ്യുന്നത് എങ്ങനെ കൂടുതൽ സൗകര്യപ്രദമാണെന്ന് സ്വയം തീരുമാനിക്കുന്നു.</p> <h2>HTML ലൈൻ ബ്രേക്ക്. ടാഗ് <br>.</h2> <p>ചിത്രത്തിൽ ശ്രദ്ധിക്കുക. ആദ്യ പതിപ്പിൽ വാചകം ഒരു വരിയിലും രണ്ടാമത്തെ പതിപ്പിൽ രണ്ട് വരികളിലുമാണ് എഴുതിയിരിക്കുന്നത്.</p> <br><img src='https://i1.wp.com/htmlboss.ru/image/lesson6-2.jpg' width="100%" loading=lazy loading=lazy><p>ബ്രൗസർ രണ്ട് ഓപ്ഷനുകളും ഒരുപോലെ പ്രദർശിപ്പിക്കും. വാചകം ഒരു വരിയിൽ എഴുതപ്പെടും:</p> <br><img src='https://i1.wp.com/htmlboss.ru/image/lesson6-3.jpg' width="100%" loading=lazy loading=lazy><p>ഇത് എന്തിനാണെന്ന് നിങ്ങൾ ചോദിക്കുന്നു? തീർച്ചയായും, കോഡുകളിലൊന്നിൽ, വാചകത്തിന്റെ ഒരു ഭാഗം മറ്റൊരു വരിയിലേക്ക് മാറ്റുന്നു. ബ്രൗസറിൽ ചില വാചകങ്ങൾ മറ്റൊരു വരിയിലേക്ക് നീക്കിയാൽ അത് യുക്തിസഹമായിരിക്കും, എന്നാൽ ഇക്കാര്യത്തിൽ html-ന് അതിന്റേതായ യുക്തിയുണ്ട്. <u>html കോഡിൽ നമ്മൾ ഒരു ലൈൻ ബ്രേക്ക് ഉണ്ടാക്കുകയാണെങ്കിൽ, ബ്രൗസറിന് ഇത് ഒരു സ്‌പെയ്‌സിന് തുല്യമാണ്</u>(ടെക്‌സ്റ്റിലെ വാക്കുകൾക്കിടയിലുള്ള ഒരു സാധാരണ ഇടം പോലെ). ടെക്‌സ്‌റ്റിന്റെ ഭാഗം ഒരു വരിയല്ല, 2 അല്ലെങ്കിൽ 3 (ഏതെങ്കിലും സംഖ്യ) നീക്കുകയാണെങ്കിൽ, ബ്രൗസർ ഈ ദൂരം വാക്കുകൾക്കിടയിലുള്ള ഒരു സാധാരണ ഇടമായി കണക്കാക്കുകയും സ്‌ക്രീനിൽ പ്രദർശിപ്പിക്കുമ്പോൾ ടെക്‌സ്‌റ്റ് ഒരു വരിയിൽ എഴുതുകയും ചെയ്യും. .</p> <h3>ടാഗ് <br></h3> <p>മൂന്നാമത്തെ പാഠത്തിൽ ടാഗുകൾ പരിചയപ്പെട്ടപ്പോൾ, ക്ലോസിംഗ് ആവശ്യമില്ലാത്ത ടാഗുകൾ ഉണ്ടെന്ന് ഞാൻ സൂചിപ്പിച്ചു. ടാഗ് ചെയ്യുക <b><br></b>അവയിലൊന്ന് ലൈൻ ബ്രേക്കുകൾക്കായി ഉപയോഗിക്കുന്നു. <br>നമുക്ക് ഇത് കോഡിൽ പ്രയോഗിക്കാം:</p> <img src='https://i0.wp.com/htmlboss.ru/image/lesson6-4.jpg' height="298" width="388" loading=lazy loading=lazy><p>ഞങ്ങൾ ഒരു ടാഗ് ഇട്ടു <b><br></b>ഞങ്ങളുടെ html കോഡിലേക്ക്, ഇപ്പോൾ നിങ്ങൾ ബ്രൗസറിലൂടെ ഫയൽ സമാരംഭിക്കുമ്പോൾ, ടെക്‌സ്‌റ്റിന്റെ ഒരു ഭാഗം അടുത്ത വരിയിലേക്ക് മാറ്റും. <br> * <i>നോട്ട്പാഡിൽ (Ctrl + S) മാറ്റങ്ങൾ സംരക്ഷിക്കാനും ബ്രൗസറിൽ (F5) പേജ് പുതുക്കാനും മറക്കരുത്.</i></p> <p>വ്ലാഡ് മെർഷെവിച്ച്</p> <p>പ്രിന്റിംഗിലെ ടെക്‌സ്‌റ്റിൽ നിന്ന് വ്യത്യസ്തമായി, ഒരു വെബ് പേജിൽ ഹൈഫനുകൾ വളരെ അപൂർവമായി മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ, കാരണം ഞങ്ങൾ പേപ്പർ ഫോർമാറ്റുമായി കർശനമായി ബന്ധപ്പെട്ടിട്ടില്ല. വെബ്‌സൈറ്റുകൾ വ്യത്യസ്‌ത മോണിറ്ററുകളിൽ, വ്യത്യസ്‌ത മിഴിവോടെ, വ്യത്യസ്‌ത ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളിലും ബ്രൗസറുകളിലും കാണാൻ കഴിയും. ഇതെല്ലാം കോമ്പിനേഷനുകളുടെ ഒരു സംയോജനത്തിന് കാരണമാകുന്നു, അന്തിമ വാചകം ഉപയോക്താവിന് എങ്ങനെയായിരിക്കുമെന്ന് പ്രവചിക്കാൻ കഴിയില്ല. ഇക്കാരണത്താൽ, വാചകം സാധാരണയായി ഇടതുവശത്തേക്ക് വിന്യസിക്കുന്നു, കൂടാതെ മുഴുവൻ വാക്കുകളിലും ഹൈഫനുകൾ സംഭവിക്കുന്നു. എന്നിട്ടും, ചില സന്ദർഭങ്ങളിൽ വാക്ക് ഹൈഫനേഷൻ ആവശ്യമാണ്, ഉദാഹരണത്തിന്, ഒരു നിശ്ചിത വീതിയുടെ ഇടുങ്ങിയ നിരകളിൽ നീളമുള്ള രാസ അല്ലെങ്കിൽ മെഡിക്കൽ പദങ്ങൾ ഉപയോഗിക്കുമ്പോൾ, സൗന്ദര്യാത്മകതയ്ക്കായി. HTML, CSS എന്നിവയിൽ ഹൈഫനുകൾ ചേർക്കുന്നതിന് സ്വമേധയാലുള്ള അല്ലെങ്കിൽ സ്വയമേവയുള്ള നിരവധി മാർഗങ്ങളില്ല, അതിനാൽ ഞാൻ അവയെല്ലാം ലിസ്റ്റ് ചെയ്യും.</p> <h2>ഒരു ടാഗ് ഉപയോഗിക്കുന്നു <wbr></h2> <p>ടാഗ് ചെയ്യുക <wbr>HTML5-ൽ അവതരിപ്പിക്കുകയും ആവശ്യമുള്ളപ്പോൾ വേഡ് റാപ്പ് സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. റഷ്യൻ ഭാഷയുടെ നിയമങ്ങൾ അനുസരിച്ച്, ഹൈഫനേഷൻ അനുവദനീയമായ സ്ഥലങ്ങളിൽ, ഞങ്ങൾ തിരുകുന്നു <wbr>(ഉദാഹരണം 1). മുഴുവൻ വാക്കും അനുവദിച്ച വീതിയിൽ യോജിച്ചാൽ, ഈ ടാഗ് ഒരു തരത്തിലും പ്രകടമാകില്ല, മാത്രമല്ല അതിന്റെ സാന്നിധ്യത്തെക്കുറിച്ച് നമുക്ക് അറിയാൻ പോലും കഴിയില്ല. വാക്ക് അനുയോജ്യമല്ലെങ്കിൽ, ബ്രൗസർ ടാഗിന്റെ സ്ഥാനത്താണ് <wbr>ഒരു കൈമാറ്റം സൃഷ്ടിക്കുന്നു.</p> <p>ഉദാഹരണം 1. ടാഗ് <wbr></p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>കൈമാറ്റങ്ങൾ

ഒന്ന് പന്ത്രണ്ടാം ക്ലാസ് സ്വപ്നക്കാരിയായ അൻഷെലിക, സ്കൂളിൽ നിന്ന് ബിരുദം നേടിയ ശേഷം, ബിസിനസ്സ് തൊഴിൽ തിരഞ്ഞെടുത്തു ഉൽപ്പാദിപ്പിച്ചു ഡ്രൈവർ പ്രണാമം.



ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. ഹൈഫനുകളുള്ള വാചകം

മൃദു കൈമാറ്റം

അപേക്ഷ ഗുരുതരമായ ഒരു പോരായ്മയുണ്ട് - ഇത് നമ്മുടെ മുന്നിലുള്ള ഒരു ഹൈഫനാണോ അതോ മറ്റൊരു വരിയിലെ ഒരു പ്രത്യേക പദമാണോ എന്ന് മനസിലാക്കാൻ കഴിയില്ല. ഇക്കാരണത്താൽ, വാക്യത്തിന്റെ അർത്ഥം നഷ്ടപ്പെടുകയും അത് തെറ്റിദ്ധരിക്കപ്പെടുകയും ചെയ്തേക്കാം. ടൈപ്പോഗ്രാഫിയുടെ നിയമങ്ങൾക്കനുസൃതമായി ഹൈഫനേഷനുകൾ ചെയ്യണം, അതായത്: വരിയുടെ അവസാനം ഒരു ഹൈഫൻ ചേർക്കുക. സോഫ്റ്റ് ഹൈഫനേഷൻ ഇതിനെ നന്നായി നേരിടുന്നു; HTML കോഡിൽ അതിനായി ഒരു പ്രത്യേക പ്രതീകമുണ്ട് - . ഇത് ഒരു ടാഗിന്റെ അതേ റോൾ ചെയ്യുന്നു - സാധാരണ ടെക്‌സ്‌റ്റിൽ ദൃശ്യമാകില്ല, കൂടാതെ ഒരു ഹൈഫൻ ചേർക്കുമ്പോൾ വാക്ക് മറ്റൊരു വരിയിലേക്ക് നീക്കുന്നു (ഉദാഹരണം 2).

ഉദാഹരണം 2: മൃദു കൈമാറ്റം

കൈമാറ്റങ്ങൾ

പതിനൊന്നാം ക്ലാസ് വിദ്യാർത്ഥിനിയായ ആഞ്ചെലിക്ക സ്കൂളിൽ നിന്ന് ബിരുദം നേടിയ ശേഷം ബിസിനസ്സ് ഡ്രൈവർ തൊഴിൽ തിരഞ്ഞെടുത്തു.



ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 2. ചിത്രവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വാചകം എത്രത്തോളം കൂടുതൽ സൗന്ദര്യാത്മകവും വ്യക്തവുമാണെന്ന് ശ്രദ്ധിക്കുക. 1.

അരി. 2. ഹൈഫനുകളുള്ള വാചകം

വാക്ക്-ബ്രേക്ക് സ്വത്ത്

ഹൈഫനുകൾ സൃഷ്ടിക്കുന്ന പ്രക്രിയ ഓട്ടോമേറ്റ് ചെയ്യുന്നതിന്, ബ്രേക്ക്-ഓൾ മൂല്യമുള്ള വേഡ്-ബ്രേക്ക് പ്രോപ്പർട്ടി ഉപയോഗിക്കുക (ഉദാഹരണം 3). നിങ്ങൾ ഇനി HTML-ലേക്ക് ചിഹ്നങ്ങളോ ടാഗുകളോ ചേർക്കേണ്ടതില്ല; ശൈലികൾ എല്ലാം ശ്രദ്ധിക്കുന്നു.

ഉദാഹരണം 3. വേഡ് ബ്രേക്ക് ഉപയോഗിക്കുന്നത്

കൈമാറ്റങ്ങൾ

പതിനൊന്നാം ക്ലാസുകാരിയായ ആഞ്ചെലിക്ക സ്കൂളിൽ നിന്ന് ബിരുദം നേടിയ ശേഷം ഓഫീസ് ജോലിക്കാരന്റെ തൊഴിൽ തിരഞ്ഞെടുത്തു.



ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 3. ടെക്സ്റ്റ് ഹൈഫനേഷന്റെ നിയമങ്ങൾ ഈ സാഹചര്യത്തിൽ കണക്കിലെടുക്കുന്നില്ല, അതിനാൽ വാക്കുകൾ വളരെ വിചിത്രമായ രീതിയിൽ ഹൈഫനേറ്റ് ചെയ്യാൻ കഴിയും.

അരി. 3. ഹൈഫനുകളുള്ള വാചകം

ലിസ്റ്റുചെയ്ത എല്ലാ രീതികളിലും, “സെമി-മാനുവൽ” ഉപയോഗിക്കുന്നത് മികച്ച ഫലം നൽകുന്നു - റഷ്യൻ ഭാഷയുടെ നിയമങ്ങൾ പാലിക്കുന്നു, വാചകം ഏറ്റവും സൗന്ദര്യാത്മകമായി കാണപ്പെടുന്നു. വാചകത്തിൽ ദൈർഘ്യമേറിയ വാക്കുകൾ ഉള്ളപ്പോൾ അത് ഉപയോഗിക്കുക.

ഹൈഫൻസ് പ്രോപ്പർട്ടി

അവസാനമായി, ഹൈഫനുകൾ സ്വയമേവ ചേർക്കുന്നതിനുള്ള ഏറ്റവും ശക്തവും സൗകര്യപ്രദവുമായ പ്രോപ്പർട്ടി ഹൈഫനുകളാണ്. ബ്രൗസറിൽ നിർമ്മിച്ച ഹൈഫനേഷൻ നിഘണ്ടു അടിസ്ഥാനമാക്കിയുള്ളതാണ് ഇതിന്റെ പ്രവർത്തനം, അതിനാൽ ഇത് മികച്ച ഫലം നൽകുന്നു. IE10, Firefox, Android, iOS എന്നിവയിൽ പിന്തുണയ്ക്കുന്നു. Chrome, Opera എന്നിവ പിന്തുണയ്ക്കുന്നില്ല. ഇത് പ്രവർത്തിക്കുന്നതിന്, ടാഗിനായി ru മൂല്യത്തിനൊപ്പം lang ആട്രിബ്യൂട്ട് ചേർക്കുക (ഉദാഹരണം 4).

ഉദാഹരണം 4: ഹൈഫനുകൾ ഉപയോഗിക്കുന്നത്

കൈമാറ്റങ്ങൾ

പതിനൊന്നാം ക്ലാസുകാരിയായ ആഞ്ചെലിക്ക സ്കൂളിൽ നിന്ന് ബിരുദം നേടിയ ശേഷം ഓഫീസ് ജോലിക്കാരന്റെ തൊഴിൽ തിരഞ്ഞെടുത്തു.



ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 4.

അരി. 4. ഹൈഫനുകളുള്ള വാചകം

കൈമാറ്റ നിരോധനം

പലപ്പോഴും വിപരീത ചുമതല ഉയർന്നുവരുന്നു - ഭാഷയുടെ നിയമങ്ങൾ അനുസരിച്ച് അസ്വീകാര്യമായ സ്ഥലങ്ങളിൽ ഹൈഫനേഷനുകൾ നിരോധിക്കുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു സംഖ്യ (10 മില്ലി), ഒരു വർഷത്തിന്റെ പദവി (ബിസി 54), കുടുംബപ്പേരിൽ നിന്നുള്ള ഇനീഷ്യലുകൾ, സ്ഥിരമായ ചുരുക്കെഴുത്തുകൾ (മുതലായവ) എന്നിവയിൽ നിന്ന് അളക്കാനുള്ള യൂണിറ്റുകൾ വേർതിരിക്കാൻ കഴിയില്ല. ബ്രൗസറിനെ ഹൈഫനുകൾ ചേർക്കുന്നത് തടയാൻ ഇടം, അത് ഒരു നോൺ-ബ്രേക്കിംഗ് സ്പേസ് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കേണ്ടതാണ് (ഉദാഹരണം 5).

ഉദാഹരണം 5: ഉപയോഗം

കൈമാറ്റങ്ങൾ

കോർഡിനേറ്റുകളിലെ തടാകം 70° 58′ 19″ N. w. 97° 24′ 5″ ഇ. റഷ്യയിലെ ക്രാസ്നോയാർസ്ക് ടെറിട്ടറിയിലെ തൈമർ ഡോൾഗാനോ-നെനെറ്റ്സ് ജില്ലയിൽ സ്ഥിതി ചെയ്യുന്നു.



ഈ ഉദാഹരണത്തിൽ, കോർഡിനേറ്റുകൾ ശരിയായി എഴുതാൻ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു, അത് വാചകം പൊതിയാൻ അനുവദിക്കുന്നില്ല.

ലേഔട്ടുകൾ നിർമ്മിക്കുമ്പോൾ, വെബ്‌മാസ്റ്റർമാർക്ക് ആനുകാലികമായി ഒരു ചോദ്യമുണ്ട്: വാചകം എങ്ങനെ കൈമാറും? മിക്ക കേസുകളിലും, ബ്രൗസർ ഈ ചുമതല സ്വന്തമായി കൈകാര്യം ചെയ്യുന്നു. എന്നാൽ ചിലപ്പോൾ ഈ പ്രക്രിയ നിയന്ത്രണവിധേയമാക്കേണ്ടതുണ്ട്, പ്രത്യേകിച്ച് നീണ്ട വാക്കുകളും ശൈലികളും ഫോർമാറ്റ് ചെയ്യുമ്പോൾ, തെറ്റായി വിവർത്തനം ചെയ്താൽ, അവയുടെ അർത്ഥം നഷ്ടപ്പെടും.

വാക്ക്-റാപ്പ് പ്രോപ്പർട്ടി

HTML-ൽ വരികൾ വേർതിരിക്കാൻ ഒരു പ്രത്യേക ടാഗ് ഉണ്ട്
. എന്നാൽ ഇത് പതിവായി ഉപയോഗിക്കുന്നത് ഡവലപ്പർമാർക്കിടയിൽ മോശം പെരുമാറ്റമായി കണക്കാക്കപ്പെടുന്നു, ഇത് പലപ്പോഴും പ്രൊഫഷണലിസത്തെ സൂചിപ്പിക്കുന്നു. തെളിവായി, നിങ്ങൾക്ക് ഒരു ലോഗോ ഉണ്ടെന്നും ഓരോ അക്ഷരവും ഒരു പുതിയ വരിയിൽ തുടങ്ങണമെന്നും സങ്കൽപ്പിക്കുക:

വാക്കുകളുടെ റീവേഡിംഗ് പരിശോധിക്കുന്നു

ഏതൊരു ഡവലപ്പറെയും കൾച്ചർ ഷോക്ക് ഉണ്ടാക്കുന്ന ബുദ്ധിമുട്ടുള്ളതും വൃത്തികെട്ടതുമായ കോഡാണ് ഫലം. ഡെസ്‌ക്‌ടോപ്പ് പതിപ്പിൽ ലോഗോ തിരശ്ചീനമായും സ്‌ക്രീൻ വീതി 550 പിക്‌സലിൽ കുറവാണെങ്കിൽ ലംബമായും സ്ഥാപിക്കണമെങ്കിൽ നിങ്ങൾ എന്തുചെയ്യണം? അതിനാൽ, മൂലകങ്ങളുടെ രൂപം ഇഷ്ടാനുസൃതമാക്കാൻ എല്ലായ്പ്പോഴും കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുക. മാത്രമല്ല, CSS ടൂളുകളുടെ സഹായത്തോടെ, ലൈൻ ബ്രേക്കുകൾ കൂടുതൽ ഗംഭീരമായ രീതിയിൽ നടത്തുന്നു. ഈ സാഹചര്യത്തിൽ, അനാവശ്യ മാർക്ക്അപ്പ് ഇല്ല, ഇത് പേജ് ലോഡിംഗ് വേഗത കുറയ്ക്കുന്നു.

ടെക്സ്റ്റ് പ്രോസസ്സിംഗിനായി നിങ്ങൾ ആക്സസ് ചെയ്യേണ്ട ആദ്യത്തെ പ്രോപ്പർട്ടി വേഡ്-റാപ്പ് ആണ്. മൂന്ന് മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു: സാധാരണ, ബ്രേക്ക്-എല്ലാം, സൂക്ഷിക്കുക-എല്ലാം. പ്രവർത്തിക്കാൻ, നിങ്ങൾ ബ്രേക്ക്-ഓൾ മാത്രം ഓർക്കേണ്ടതുണ്ട്. സാധാരണമാണ് ഡിഫോൾട്ട്, അത് വ്യക്തമാക്കുന്നതിൽ അർത്ഥമില്ല. ഒരു CSS ഡോക്യുമെന്റിലെ ലൈൻ ബ്രേക്കുകൾ തടയുന്നതിനുള്ള എല്ലാ മാർഗങ്ങളും സൂക്ഷിക്കുക. ചൈനീസ്, ജാപ്പനീസ്, കൊറിയൻ അക്ഷരങ്ങൾക്കായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. അതിനാൽ, നിങ്ങൾ ഈ ഭാഷകളിലൊന്നിൽ ബ്ലോഗ് ചെയ്യാൻ പോകുന്നില്ലെങ്കിൽ, പ്രോപ്പർട്ടി നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകില്ല. ഇത് സഫാരി ബ്രൗസറും iOS മൊബൈൽ ഫോണുകളും പിന്തുണയ്ക്കുന്നില്ല.

മുമ്പത്തെ ഉദാഹരണത്തിൽ നിന്നുള്ള ലോഗോയ്ക്കായി CSS ഉപയോഗിച്ച് ഓരോ അക്ഷരവും ഒരു പുതിയ വരിയിലേക്ക് അസൈൻ ചെയ്യാൻ, നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതേണ്ടതുണ്ട്:

P( ഫോണ്ട്: ബോൾഡ് 30px Helvetica, sans-serif; വീതി: 25px; വേഡ്-റാപ്പ്: ബ്രേക്ക്-എല്ലാം; )

ഫോണ്ടിന്റെ വീതിയും വലുപ്പവും തിരഞ്ഞെടുത്തിരിക്കുന്നത് ഒരു അക്ഷരത്തിന് മാത്രം മതിയായ ഇടമുള്ള തരത്തിലാണ്. ബ്രേക്ക്-ഓൾ മൂല്യമുള്ള വേഡ്-റാപ്പ് ഓരോ തവണയും വാക്ക് ഒരു പുതിയ ലൈനിലേക്ക് തകർക്കാൻ ബ്രൗസറിനോട് പറയുന്നു. ഈ പ്രോപ്പർട്ടി മാറ്റാനാകാത്തത് എന്ന് വിളിക്കാനാവില്ല. എന്നാൽ അഭിപ്രായങ്ങൾ രേഖപ്പെടുത്തുന്നതിനുള്ള ഫീൽഡുകൾ പോലെയുള്ള ചെറിയ ടെക്സ്റ്റ് ബ്ലോക്കുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

വൈറ്റ്-സ്പേസ് പ്രോപ്പർട്ടി

പുതിയ വെബ് ഡെവലപ്പർമാർ ചെയ്യുന്ന ഒരു സാധാരണ തെറ്റ് സ്‌പെയ്‌സുകളോ എന്റർ കീകളോ ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് എഡിറ്റുചെയ്യാൻ ശ്രമിക്കുകയാണ്, തുടർന്ന് അവരുടെ ശ്രമങ്ങൾ പേജിൽ കാണിക്കാത്തത് എന്തുകൊണ്ടെന്ന് ആശ്ചര്യപ്പെടുന്നു. നിങ്ങൾ എത്ര തവണ എന്റർ അമർത്തിപ്പിടിച്ചാലും ബ്രൗസർ അത് അവഗണിക്കും. എന്നാൽ എല്ലാ സ്‌പെയ്‌സിംഗും കണക്കിലെടുത്ത് നിങ്ങൾക്ക് ആവശ്യമുള്ള രീതിയിൽ വാചകം പ്രദർശിപ്പിക്കാൻ ഒരു മാർഗമുണ്ട്.

ഒരു CSS ഡോക്യുമെന്റിൽ, വൈറ്റ്-സ്‌പേസ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് അസൈൻ ചെയ്‌തിരിക്കുന്ന ലൈൻ ബ്രേക്കുകൾ സ്‌പെയ്‌സുകളെ ബഹുമാനിക്കുന്നതിനോ കീസ്‌ട്രോക്കുകൾ നൽകുന്നതിനോ കോൺഫിഗർ ചെയ്യാൻ കഴിയും. മൂല്യ പ്രീ-ലൈനോടുകൂടിയ വൈറ്റ്-സ്‌പെയ്‌സ് ടെക്‌സ്‌റ്റിൽ എന്റർ കാണാൻ ബ്രൗസറിനെ നിർബന്ധിക്കും.

വാക്കുകളുടെ റീവേഡിംഗ് പരിശോധിക്കുന്നു

നിങ്ങളുടെ CSS കോഡിലെ പ്രീ-റെപ്പ് എന്നതിലേക്ക് നിങ്ങൾ പ്രീ-ലൈൻ മാറ്റുകയാണെങ്കിൽ, ലൈൻ റാപ്പ് വൈറ്റ്‌സ്‌പെയ്‌സ് കണക്കിലെടുക്കും. തിരിച്ചും, വാചകത്തിന് nowrap മൂല്യമുള്ള ഒരു വൈറ്റ്-സ്‌പേസ് പ്രോപ്പർട്ടി നൽകി ഏതെങ്കിലും പൊതിയുന്നത് നിരോധിക്കുക:

#wrapper p( നിറം: #FFF; പാഡിംഗ്: 10px; ഫോണ്ട്: ബോൾഡ് 16px Helvetica, sans-serif; white-space: nowrap; )

ടെക്സ്റ്റ്-ഓവർഫ്ലോ

ടെക്സ്റ്റുമായി പ്രവർത്തിക്കുന്നതിനുള്ള മറ്റൊരു ഉപയോഗപ്രദമായ ഉപകരണം ടെക്സ്റ്റ്-ഓവർഫ്ലോ ആണ്. ലൈൻ ബ്രേക്കുകൾക്ക് പുറമേ, കണ്ടെയ്നർ നിറയുമ്പോൾ ഉള്ളടക്കം ട്രിം ചെയ്യാൻ CSS പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. രണ്ട് മൂല്യങ്ങൾ എടുക്കുന്നു:

  • ക്ലിപ്പ് - ലളിതമായി വാചകം ട്രിം ചെയ്യുന്നു;
  • എലിപ്സിസ് - ഒരു എലിപ്സിസ് ചേർക്കുന്നു.
#wrapper p(color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; ടെക്സ്റ്റ്-ഓവർഫ്ലോ: എലിപ്സിസ്; /*എലിപ്സിസ് ചേർക്കുക*/ വൈറ്റ്-സ്പെയ്സ്: നൗറാപ്പ്; /* ലൈൻ റാപ്പിംഗ് പ്രവർത്തനരഹിതമാക്കുക */ ഓവർഫ്ലോ : മറച്ചിരിക്കുന്നു;/*കണ്ടെയ്‌നറിനപ്പുറമുള്ളതെല്ലാം മറയ്‌ക്കുക*/)

പ്രോപ്പർട്ടി പ്രവർത്തിക്കുന്നതിന്, ലൈൻ ബ്രേക്കുകൾ നിരോധിക്കുന്നതിനും മറഞ്ഞിരിക്കുന്ന മൂല്യം ഓവർഫ്ലോ ചെയ്യുന്നതിനും മൂലകം സജ്ജീകരിച്ചിരിക്കണം.