Kako prestaviti besedilo v novo vrstico v CSS

Kako prestaviti besedilo v novo vrstico v CSS

Med spletnim oblikovanjem se lahko zdi, da so dolga besedila nenadzorovana. Lahko pa so tudi neizogibni in včasih na koncu prestopijo meje. To lahko ustvari ohlapen objektni model dokumenta (DOM) z nepotrebnim prelivom, ki ni uporabniku prijazen.





Ampak tu je dobra novica: s tako dolgimi besedili se lahko spopadete tako, da jih z novo CSS zavijete v novo vrstico. Tukaj vam bomo pokazali, kako zaviti dolga, neprekinjena besedila s CSS.



Kako deluje CSS Text Wrap

CSS obravnava raztegnjene dolge besede z uporabo vgrajenega zavijanje besed ali prelivni ovoj lastnine.





kako sprostiti pomnilnik windows 7

Kadar pa brskalniki niso nadzorovani, privzeto obravnavajo tako dolga besedila. Ne bodo zavijali dolgih besed, dokler ne prejmejo navodila za to.

Povezano: Kaj morate vedeti o DOM



Dve glavni lastnosti CSS, omenjeni prej, delujeta na enak način in ju lahko uporabljate zamenljivo. Sprejemajo pa štiri vrednosti ali skladnje:

  • prelomna beseda : To je dejanska sintaksa CSS, ki brskalniku pove, naj dolgo besedilo premakne v novo vrstico.
  • normalno : Prelomi vsako besedo na običajnih ločevalnih točkah znotraj DOM -a. Na dolge strune nima učinka.
  • začetni : To je privzeti način brskanja po nizih. Kot normalno skladnja, ne lomi dolgih besed.
  • podedovati : Pove otrokovemu elementu, da podeduje lastnost svojih staršev. Ampak še vedno ne deluje z dolgimi besedili, razen če se prijavite prelomna beseda na nadrejeni element.

Kako zaviti dolge besede z uporabo CSS Word Wrap

Zavijanje besed v novo vrstico s CSS je enostavno in ne zahteva okornih sprememb CSS.



Na primer dolga h2 besedilo v vsebniškem vsebniku na spodnji vzorčni sliki prečka mejno črto:

Poglejmo, kako ga lahko prenesemo v naslednjo vrstico z uporabo zavijanje besed Lastnost CSS:



HTML :


This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{
word-wrap: break-word;
}

Po dolgem zavijanju h2 besedilo v vzorčni sliki, tukaj je izhod:

To je to! Zdaj veste, kako z CSS -jem vstaviti besede v novo vrstico v svojem DOM -u.

Tipka Windows je prenehala delovati Windows 10

Povezano: Kako ciljati na del spletne strani z izbirniki CSS

Vendar, kot je bilo že povedano, zavijanje besed in prelivni ovoj delujejo na enak način in sprejemajo podobne lastnosti.

Uporabiti prelivni ovoj namesto tega samo zamenjajte zavijanje besed z njim.

Pomembno je, da besede zavijete na spletno stran

Poleg tega, da vaši spletni strani doda več estetike, zavijanje besedil zgosti DOM. Tudi če nadzirate, kaj se nanaša na vaš razdelek z vsebino, lahko uporabniki objavijo povezave ali druge besede, ki ne ustrezajo vašemu vsebniku besedila ali celotnemu DOM -u.

Zato je uporaba takšnega preloma besedila v ta razdelek potrebna, da DOM ostane nedotaknjen.

kako odpreti bliskovni pogon v sistemu Windows 10
Deliti Deliti Cvrkutati E-naslov Kako uporabiti medijske poizvedbe v HTML in CSS za ustvarjanje odzivnih spletnih mest

Želite, da bi vaše spletno mesto izgledalo neverjetno na mobilnih napravah? Čas je, da se naučite uporabljati medijske poizvedbe v CSS.

Preberite Naprej Sorodne teme
  • Programiranje
  • CSS
  • Objektni model dokumenta
O avtorju Idisou Omisola(94 objavljenih člankov)

Idowu je navdušen nad vsemi pametnimi tehnologijami in produktivnostjo. V prostem času se igra s kodiranjem in se, ko mu je dolgčas, preklopi na šahovsko tablo, rad pa se občasno tudi odmika od rutine. Njegova strast, da ljudem pokaže pot okoli sodobne tehnologije, ga motivira, da piše več.

Več od Idowu Omisola

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti