Hogyan lehet szöveget csavarni egy új sorba a CSS -ben

Hogyan lehet szöveget csavarni egy új sorba a CSS -ben

A hosszú szövegek ellenőrizhetetlennek tűnhetnek a webes tervezés során. De elkerülhetetlenek is lehetnek, és néha átlépik a határokat. Ez laza dokumentumobjektum-modellt (DOM) hozhat létre, szükségtelen túlcsordulással, amely nem felhasználóbarát.





De itt a jó hír: kezelheti az ilyen hosszú szövegeket, ha új sorba csomagolja őket a CSS használatával. Itt megmutatjuk, hogyan csomagolhat hosszú, töretlen szövegeket CSS -sel.





Hogyan működik a CSS Text Wrap?

A CSS kezeli a kifeszített hosszú szavakat a beépített segítségével sortörés vagy túlcsordulás-pakolás ingatlan.





walkie talkie alkalmazás, amely valódi walkie talkie -kkal működik

Ha azonban nem ellenőrzik, a böngészők alapértelmezés szerint kezelik az ilyen hosszú szövegeket. Nem csomagolnak hosszú szavakat, amíg meg nem kapják az erre vonatkozó utasítást.

Kapcsolódó: Mit kell tudni a DOM -ról



A korábban említett két fő CSS -tulajdonság ugyanúgy működik, és felcserélhetően használhatja őket. Mindazonáltal négy értéket vagy szintaxist fogadnak el:

  • törésszó : Ez a tényleges CSS szintaxis, amely azt mondja a böngészőnek, hogy tekerjen egy hosszú szöveget egy új sorba.
  • Normál : Minden szót megszakít a DOM normál elválasztási pontjain. Nincs hatással a hosszú karakterláncokra.
  • a kezdeti : Ez a böngésző alapértelmezett módja a karakterláncok kezelésére. Mint a Normál szintaxis, nem töri meg a hosszú szavakat.
  • örököl : Azt mondja a gyermek elemnek, hogy örökölje a szülő tulajdonát. De még mindig nem működik a hosszú szövegekkel, kivéve, ha jelentkezel törésszó a szülő elemhez.

Hogyan csomagoljunk hosszú szavakat a CSS Word Wrap segítségével

A szavak kicsomagolása egy új sorba a CSS segítségével egyszerű, és nem igényel nehézkes CSS -csípéseket.





Például a hosszú h2 az alábbi mintakép szövegmezőjében lévő szöveg átlépi a határvonalat:

Lássuk, hogyan tudjuk a következő sorba csomagolni a sortörés CSS tulajdonság:





HTML :


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

CSS :

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

A hosszú becsomagolása után h2 szöveg a mintaképben, itt a kimenet:

Ez az! Most már tudja, hogyan kell a szavakat a DOM -on belül egy új sorba csomagolni a CSS használatával.

hogyan lehet visszaállítani a jelszót a Facebookon

Kapcsolódó: Hogyan lehet megcélozni egy weboldal egy részét CSS -választók használatával

Azonban, mint korábban említettük, sortörés és túlcsordulás-pakolás ugyanúgy működnek, és elfogadják a hasonló tulajdonságokat.

Használni túlcsordulás-pakolás helyette csak cserélje ki sortörés ezzel.

Fontos, hogy szavakat csomagoljon egy weboldalon

Amellett, hogy több esztétikát ad a weboldalához, a szövegek csomagolása tömöríti a DOM -ot. Még akkor is, ha Ön szabályozza, hogy mi kerüljön a tartalom részébe, a felhasználók olyan linkeket vagy más szavakat tehetnek közzé, amelyek nem férnek bele a szöveges tárolóba vagy a teljes DOM -ba.

Ezért a szöveg tördelésének alkalmazása egy ilyen szakaszra azért szükséges, hogy a DOM sértetlen maradjon.

ha kikapcsolom a facebookomat, mi történik az üzenetekkel
Részvény Részvény Csipog Email Hogyan kell használni a médialekérdezéseket HTML -ben és CSS -ben reszponzív webhelyek létrehozásához

Szeretné, hogy webhelye csodálatos legyen mobileszközökön? Itt az ideje, hogy megtanuljuk a médialekérdezések használatát a CSS -ben.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • CSS
  • Dokumentum objektum modell
A szerzőről Idisou Omisola(94 cikk megjelent)

Idowu szenvedélyes minden intelligens technológia és termelékenység iránt. Szabadidejében kódolással játszik, és ha unatkozik, sakktáblára vált, de szeret időnként elszakadni a rutintól. Szenvedélye, hogy megmutassa az embereknek a modern technológia körüljárását, motiválja őt, hogy írjon többet.

Továbbiak Idowu Omisola -tól

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide