Kā iesaiņot tekstu jaunā rindā CSS

Kā iesaiņot tekstu jaunā rindā CSS

Web izstrādes laikā gari teksti var šķist nekontrolējami. Bet tie var būt arī neizbēgami, un dažreiz viņi šķērso robežas. Tas var radīt vaļīgu dokumenta objekta modeli (DOM) ar nevajadzīgu pārplūdi, kas nav lietotājam draudzīga.





Bet šeit ir labā ziņa: jūs varat tikt galā ar tik gariem tekstiem, iesaiņojot tos jaunā rindā, izmantojot CSS. Šeit mēs parādīsim, kā ietīt garus, nepārtrauktus tekstus ar CSS.



Kā darbojas CSS teksta iesaiņošana

CSS apstrādā izstieptus garus vārdus, izmantojot iebūvēto vārdu ietīšana vai pārplūdes ietīšana īpašums.





kā izcelt uz pdf

Tomēr, ja tie netiek kontrolēti, pārlūkprogrammas pēc noklusējuma apstrādā tik garus tekstus. Viņi neiesaiņos garus vārdus, kamēr nebūs saņēmuši norādījumus to darīt.

Saistīts: Kas jums jāzina par DOM



Abi iepriekš minētie galvenie CSS rekvizīti darbojas vienādi, un jūs varat tos izmantot savstarpēji aizvietojami. Tomēr tie pieņem četras vērtības vai sintakses:

  • pārtraukuma vārds : Šī ir faktiskā CSS sintakse, kas liek pārlūkam ietīt garu tekstu jaunā rindā.
  • normāli : Tas pārtrauc katru vārdu parastos DOM atdalīšanas punktos. Tas neietekmē garās virknes.
  • sākotnējais : Tas ir noklusējuma pārlūkprogrammas veids, kā apstrādāt virknes. Kā normāli sintakse, tas nesalauž garus vārdus.
  • mantot : Tas liek bērna elementam mantot tā vecāka īpašumu. Bet tas joprojām nedarbojas ar gariem tekstiem, izņemot jūs piesakāties pārtraukuma vārds uz vecāku elementu.

Kā ietīt garus vārdus, izmantojot CSS Word Wrap

Vārdu iesaiņošana jaunā rindā ar CSS ir vienkārša un neprasa apgrūtinošus CSS pielāgojumus.



Piemēram, garais h2 zemāk esošā parauga attēla teksta konteinera teksts šķērso robežas līniju:

Apskatīsim, kā mēs to varam ietīt nākamajā rindā, izmantojot vārdu ietīšana CSS īpašums:



HTML :


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

CSS :

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

Pēc ietīšanas garo h2 teksts parauga attēlā, šeit ir izvade:

Tieši tā! Tagad jūs zināt, kā iesaiņot vārdus jaunā rindā savā DOM, izmantojot CSS.

Windows atslēga pārstāja darboties windows 10

Saistīts: Kā atlasīt tīmekļa lapas daļu, izmantojot CSS atlasītājus

Tomēr, kā minēts iepriekš, vārdu ietīšana un pārplūdes ietīšana strādāt tāpat un pieņemt līdzīgas īpašības.

Izmantot pārplūdes ietīšana tā vietā vienkārši nomainiet vārdu ietīšana ar to.

Ir svarīgi ietīt vārdus tīmekļa lapā

Papildus tam, ka jūsu vietnei tiek pievienots vairāk estētikas, tekstu iesaiņošana saspiež DOM. Pat ja jūs kontrolējat satura sadaļu, lietotāji var ievietot saites vai citus vārdus, kas neietilpst jūsu teksta konteinerā vai visā jūsu domēnā.

Tāpēc, lai saglabātu DOM neskartu, šādai sadaļai ir jāpiemēro teksta ietīšana.

kā atvērt zibatmiņas disku operētājsistēmā Windows 10
Kopīgot Kopīgot Čivināt E -pasts Kā izmantot multivides vaicājumus HTML un CSS, lai izveidotu atsaucīgas vietnes

Vai vēlaties, lai jūsu vietne mobilajās ierīcēs izskatītos pārsteidzoši? Ir pienācis laiks iemācīties izmantot multivides vaicājumus CSS.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • CSS
  • Dokumenta objekta modelis
Par autoru Idisou Omisola(Publicēti 94 raksti)

Idowu aizraujas ar jebko gudru tehnoloģiju un produktivitāti. Brīvajā laikā viņš spēlējas ar kodēšanu un pārslēdzas uz šaha galdu, kad viņam ir garlaicīgi, taču viņam arī patīk laiku pa laikam atrauties no rutīnas. Viņa aizraušanās parādīt cilvēkiem ceļu apkārt mūsdienu tehnoloģijām motivē viņu rakstīt vairāk.

Vairāk no Idowu Omisola

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu