Kā nomainīt noklusējuma teksta iesaiņojumu ar HTML un CSS

Atšķirībā no papīra tīmekļa lapas var gandrīz bezgalīgi paplašinās uz sāniem. Tik daudz, cik iespaidīgs tas ir, tas nav kaut kas mums patiešām vajadzīgs lasīšanas laikā. Pārlūkprogrammas iesaiņo tekstu atkarībā no teksta konteinera platums un ekrāna platums lai mēs varētu redzēt visu tekstu bez nepieciešamības ritināt sāniski (tikai uz leju).

Iesaiņošana ir tas, ka pārlūkprogrammas ņem vērā daudzus faktorus, piemēram, teksta valodu vai pieturzīmju izvietojumu un atstarpes ne tikai spiediet uz leju tas, kas nav piemērots teksta saturam paredzētajā lodziņā.

Izņemot iesaiņošanu, pārlūkprogrammas rūpēties par telpām; tie sapludina vairākas secīgas atstarpes avota kodā vienā vienā vietā, kas ir sniegtajā lapā, un tās arī reģistrē piespiedu līniju pārtraukumus, pirms sāk strādāt uz iesaiņojuma.

Kad jāmaina noklusējuma teksta ietīšana

Tas viss ir lieliski un ļoti novērtēti. Bet mēs varam viegli nonākt situācijās, kad noklusējuma pārlūka darbība nav tā, ko mēs meklējam. Tas var būt virsraksts nevajadzētu ietin vai vārdu vienā punktā labāk salauzt, nekā nolaižot līniju, līnijas beigās atstājot nepāra izskatu tukšu vietu.

Var gadīties, ka mēs vienkārši izmisīgi ir vajadzīgas šīs telpas saglabātas mūsu tekstā, tomēr pārlūks tos apvieno vienā, liekot mums pievienot vairākus pirmkodā.

Var būt arī iesaiņojuma preferences mainīt teksta valodu un mērķi. Mandarīna ziņu rakstam un franču dzejam nav obligāti jābūt iesaiņotiem tieši tādā pašā veidā.

Ir diezgan daudz CSS īpašību (un HTML elementu!), Kas var kontrolēt iesaiņojumu un pārtraukuma punktus un arī definējiet, kā pirms iesaiņošanas apstrādā atstarpes un līniju pārtraukumus.

Mīkstās iesaiņošanas iespējas un mīkstie ietīšanas pārtraukumi

Pārlūkprogrammas nolemj, kur pārsegt pārpildītu tekstu atkarībā no vārdu robežām, defisēm, zilbēm, pieturzīmēm, atstarpēm un vairāk. Visas šīs vietas sauc mīkstās ietīšanas iespējas un, ja pārlūks vienā vietā iznīcina tekstu, pārtraukumu sauc par a mīksts ietīšanas pārtraukums.

Vienkāršākais veids, kā piespiediet papildu pārtraukumu var izdarīt, izmantojot veco veco
elementu.

Whitespace

Ja esat iepazinies ar balta telpa CSS īpašums, ko es derēju, jūs vispirms uzzinājāt to tādā pašā veidā kā daudzi citi; atrodoties ceļā novērstu teksta iesaiņošanu. The nolaupīt vērtība balta telpa to dara tieši.

Tomēr balta telpa īpašums ir vairāk nekā tikai iesaiņošana. Pirmkārt, kas ir atstarpes? Tas ir kosmosa rakstzīmju kopa. Katra komplekta vieta atšķiras garumā, virzienā vai abos virzienos.

Tipisks viena horizontāla atstarpe ir tas, ko mēs pievienojam, nospiežot atstarpes taustiņu. Tabulēšanas taustiņš arī pievieno a līdzīga telpa, bet ar lielāku garumu. Ievadīšanas taustiņš pievieno a vertikālā telpa lai sāktu jaunu līniju, un HTML pievieno a viena nesalaužama telpa Web lapām. Līdzīgi tam ir daudz veidu telpu “atstarpes”.

Kā jau sākumā minēju, pārlūkprogrammas sabrukt vairākas telpas (gan horizontāli, gan vertikāli) avotā vienā telpā. Viņi arī apsvērt šīs kosmosa rakstzīmes iesaiņošanas iespējām (vietas, kur var ietvert tekstu), kad ir nepieciešams iesaiņojums.

Un tieši šīs pārlūkprogrammas darbības var kontrolēt balta telpa. Ņemiet vērā, ka balta telpa īpašums neietekmē visu veidu telpas, tikai visbiežāk piemēram, parastā horizontālā vienotā telpa, cilnes telpa un līniju plūsmas.

Tālāk ir redzams parauga teksta ekrānuzņēmums iesaiņots ar pārlūkprogrammu, lai ietilptu tās tvertnē. Pārplūde notiek konteinera apakšā, un pārpildītais teksts ir krāsots atšķirīgi. Jūs pamanīsiet secīgu telpu sabrukums kodu.

 
 âÂ? Sveiki. âÂ? Sveiki. âÂ? Labdien!¢Â? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. âÂ? Sveiki. 

 .textContainer platums: 500px; augstums: 320px;  

Pēc pieteikšanās balta telpa; noteikums, teksta iesaiņošana mainās šādi:

 .textContainer / *… * / balta telpa: aizture;  

The iepriekš vērtība balta telpa saglabā visas vietas un novērš teksta iesaiņošanu:

 .textContainer / *… * / balta telpa: pirms;  

The iepriekšējs iesaiņojums vērtība balta telpa saglabā visas vietas un ietin tekstu:

 .textContainer / *… * / balta telpa: iepriekšējs iesaiņojums;  

Visbeidzot, iepriekšēja līnija vērtība balta telpa saglabā vertikālās telpas piemēram, jaunas līnijas un ietin tekstu:

 .textContainer / *… * / balta telpa: iepriekšēja līnija;  

Vārdu pārrāvumi

Vēl viens svarīgs CSS īpašums, kas jums jāzina, lai kontrolētu teksta apvalku vārdu pārtraukums. Visās augstāk redzamajās ekrānuzņēmumos var redzēt pārlūkprogrammu iesaiņoja tekstu pirms vārda “Sveiki” labajā pusē, pēc kura teksts pārpildīts. Pārlūks nepārkāpa vārdu.

Tomēr, ja jūs vajag ļaut burtu laušanu vārdos lai teksts izskatītos pat labajā pusē, jums jāizmanto pārtraukums vērtība vārdu pārtraukums īpašums:

 .textContainer / *… * / vārdu pārtraukums: viss;  

The vārdu pārtraukums īpašumam ir arī trešā vērtība pārtraukums un normāli (pieder pie noklusējuma līnijas laušanas). The saglabāt visu vērtību neļauj vārdus lauzt.

Iespējams, nevarēsiet redzēt efektu saglabāt visu angliski. Bet valodās, kurās ir burti nozīmīgas vienības, pārlūkprogramma, iesaiņojot, var lauzt vārdus, un to var novērst, izmantojot saglabāt visu.

Piemēram, burti korejiešu vārdos, sākotnēji sadalīti iesaiņošanai, tiek turēti kopā kad balta telpa: saglabāt visu; noteikums.

ìÂ?¸ÃªÂ³Â   ¥¼ Ã-Â-Â¥Ã-Â? Ã? Â? Â?¬Â   Â? Â?¬Â½Â? Ã? Â?¡Â? Ã-Â?¬Â Â-ìÂ?¬Â?¤. ì Â? 10à Â? ì   Â? Â?¬Â½Â? Ã? Â? êµÂ-ì  ?? Ã-Â?¬Â?ª° °? 1997 Ã… Â? 3ìÂ? 10ìÂ?¼Ã «Â¶Â? Ã- °  ° 12ìÂ?¼ÃªÂ¹Â?¬Â§Â? à Â? Â… ìÂ?¼Ã¬Â? à «Â§Â?¬Â?¸Ã¬Â¦Â?¬Â-Â? ìÂ? ìÂ-´à «Â¦Â½Â Â? Â?¤. ì§Â?ªÂ¸Â? à «Â  ± ë ¡Â? Ã? Â?¬Â Â-ìÂ?¬Â?¤. ìÂ?´ Ã-Â?¬Â?¬Â-Â? ìÂ? Â? Â? ìÂ-Â… ê³Â? ì    ° °?¬Â? ì    ¬¸ê    Â?¤Ã¬Â?´ Â-Â?¨ÃªÂ? à «ÂªÂ¨Ã¬Â-¬ à «Â?¤Ã¬Â?ªÂ³Â¼ ê° °?¬Â? à «Â¶Â?¬Â?¼Ã «Â¥Â¼ à «Â?¤Ã «Â ¹ Â? Â?¤.

 .textContainer / *… * / vārdu pārtraukums: saglabāt visu;  

Šī īpašība var atbalstīt citu saucamo vērtību pārtraukuma vārds nākotnē. Jūs redzēsiet, kā pārtraukuma vārds darbojas vēlāk “Pārplūdes ietīšana” sadaļā.

Vārdu pārrāvuma iespējas

Izstrādātāji var arī pievienot vārda iespējas iesaiņošanas iespējām, izmantojot HTML elements. Ja pārlūkprogrammai ir jāievieto teksta virkne, tā ņems vērā vietu, kur ir iesaiņošanas iespēja.

 
 â� Sveiki. â� Sveiki. â� Hello â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. â� Sveiki. 
 

 .textContainer / *… * / balta telpa: iepriekšējs iesaiņojums;  

Bez , viss “Sveiki” vārds būtu padarīts jaunā rindā. Pievienojot HTML kodam mēs informējām pārlūkprogrammu, ka tas ir labi, lai pārtrauktu vārdu tajā brīdī iesaiņošanai, ja tas ir nepieciešams.

Defises

The defisēm CSS īpašums ir vēl viens veids, kā kontrolēt pārtraukumus starp burtiem vardā. Ja jums ir interese, mums ir atsevišķs raksts par CSS defisi. Īsāk sakot, īpašums ļauj jums izveidojiet iesaiņošanas iespējas, izmantojot defisi.

Tā ir auto vērtība liek pārlūkprogrammai vajadzības gadījumā automātiski sapludināt un pārtraukt vārdus iesaiņošanas laikā. The rokasgrāmatu vērtība piespiež pārlūkprogrammas uz iesaiņojiet (ja nepieciešams) pie piezīmju zīmēšanas iespējām, piemēram, defisi (‐) vai ­ (mīksta defise). Ja neviens nav tika dota kā vērtība nav iesaiņojuma pie defisēm.

 
 bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse, bluehouse 
 

 .textContainer / *… * / -webkit-defises: auto; -ms-defisi: auto; defises: auto;  

Pārplūdes ietīšana

The pārplūdes ietīšana CSS īpašuma kontrole, ja a pārlūks var lauzt vārdus (vai saglabātas telpas, kuru atbalsts var notikt tuvākajā nākotnē) par pārplūdi. Kad pārtraukuma vārds vērtība ir norādīta pārplūdes ietīšana, vārds tiks sadalīti gadījumā citas mīkstās ietīšanas iespējas netiek atrastas līnijā.

Pieraksti to pārplūdes ietīšana ir arī pazīstams kā vārdu apvalks (tie ir aizstājvārdi).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / pārplūdes apvalks: break-word;  

Teksts netika ietīts pirmajā un otrajā HTML koda burtu starpā (t.i., bez iesaiņošanas iespējām). tika saglabāts kā viens vārds.

Tomēr, ja tika dota atļauja tekstā ietīšana, laužot vārdus (t.i. pārtraukuma vārds vērtība tika piešķirta pārplūdes ietīšana), iesaiņošana notika, izjaucot visu virkni kur tas bija nepieciešams.