Ako zabaliť text na nový riadok v CSS

Ako zabaliť text na nový riadok v CSS

Dlhé texty sa môžu pri webovom dizajne javiť ako nekontrolovateľné. Ale tiež sa im dá vyhnúť a niekedy skončia s prekročením hraníc. To môže vytvoriť voľný dokumentový model dokumentu (DOM) s nepotrebným pretečením, ktoré nie je užívateľsky prívetivé.





Ale tu je dobrá správa: s takýmito dlhými textami sa môžete vysporiadať tak, že ich zabalíte na nový riadok pomocou CSS. Tu vám ukážeme, ako zalamovať dlhé, neporušené texty pomocou CSS.



Ako funguje zalamovanie textu CSS

CSS zvláda natiahnuté dlhé slová pomocou vstavaného zalamovanie slovom alebo overflow-wrap nehnuteľnosť.





obnovte predvolené nastavenia registra Windows 10

Pokiaľ však nie sú ovládané, prehliadače štandardne spracovávajú také dlhé texty. Nebudú zabaľovať dlhé slová, kým k tomu nedostanú pokyn.

Súvisiace: Čo potrebujete vedieť o DOM



Dve vyššie uvedené vlastnosti CSS fungujú rovnako a môžete ich používať zameniteľne. Prijímajú však štyri hodnoty alebo syntaxe:

  • zlomové slovo : Toto je skutočná syntax CSS, ktorá hovorí prehliadaču, aby zalomil dlhý text na nový riadok.
  • normálne : Rozbije každé slovo v normálnych bodoch oddelenia v DOM. Na dlhé struny to nemá vplyv.
  • počiatočný : Je to predvolený spôsob, ako prehliadač spracováva reťazce. Ako normálne syntax, nerozbije dlhé slová.
  • dediť : Hovorí podradenému prvku, aby zdedil majetok svojho rodiča. Ale stále to nefunguje s dlhými textami, ibaže sa prihlasujete zlomové slovo k rodičovskému prvku.

Ako zalamovať dlhé slová pomocou zalamovania slov CSS

Zbaľovanie slov na nový riadok pomocou CSS je jednoduché a nevyžaduje si prácu ťažkopádnych vylepšení CSS.



Napríklad dlhé h2 text v textovom kontajneri na vzorovom obrázku nižšie prekračuje hraničnú čiaru:

Pozrime sa, ako to môžeme zabaliť na nasledujúci riadok pomocou zalamovanie slovom Vlastnosť CSS:



HTML :


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

CSS :

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

Po zabalení dlhého h2 text na ukážkovom obrázku, tu je výstup:

To je všetko! Teraz viete, ako zalamovať slová na nový riadok vo vašom DOM pomocou CSS.

nápady na rozloženie domovskej obrazovky iphone 2020

Súvisiace: Ako zacieliť časť webovej stránky pomocou selektorov CSS

Ako však už bolo uvedené, zalamovanie slovom a overflow-wrap pracovať rovnako a akceptovať podobné vlastnosti.

Použit overflow-wrap namiesto toho stačí vymeniť zalamovanie slovom s tým.

Je dôležité zabaliť slová na webovú stránku

Okrem pridania väčšej estetiky na vašu webovú stránku, balenie textov skomprimuje DOM. Aj keď ovládate, čo sa stane súčasťou vašej sekcie obsahu, používatelia môžu uverejňovať odkazy alebo iné slová, ktoré sa nezmestia do vášho textového kontajnera alebo celého vášho DOM.

Preto je na takú časť potrebné použiť zalamovanie textu, aby bol DOM neporušený.

ako zmenšiť jpg
zdieľam zdieľam Tweet E -mail Ako používať mediálne dotazy v HTML a CSS na vytváranie responzívnych webových stránok

Chcete, aby váš web vyzeral na mobilných zariadeniach úžasne? Je čas naučiť sa používať mediálne dotazy v CSS.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • CSS
  • Objektový model dokumentu
O autorovi Idisou Omisola(94 publikovaných článkov)

Idowu je zanietený pre čokoľvek, čo sa týka inteligentných technológií a produktivity. Vo svojom voľnom čase sa hrá s kódovaním a keď sa nudí, prejde na šachovnicu, ale tiež rád, keď sa raz za čas odtrhne od rutiny. Jeho vášeň ukazovať ľuďom cestu okolo moderných technológií ho motivuje písať viac.

Viac od Idowu Omisola

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber