Vārdu pārtraukums - CSS-triki

Anonim

word-breakĪpašums CSS var izmantot, lai mainītu, ja rindiņu pārtraukumi vajadzētu notikt. Parasti teksta rindiņu pārtraukumi var notikt tikai noteiktās atstarpēs, piemēram, ja ir atstarpe vai defise.

Tālāk sniegtajā piemērā mēs varam izveidot word-breakburtus starp burtiem:

p ( word-break: break-all; )

Ja pēc tam teksta platumu iestatīsim uz vienu em, vārds sadalīsies pa katru burtu:

Skatiet teksta Pildspalvas iestatīšana vertikāli, izmantojot CSS-Tricks (@ css-tricks) vārdu pārtraukumu vietnē CodePen.

Šo vērtību bieži izmanto vietās, kurās ir lietotāju veidots saturs, lai garās virknes neriskētu izjaukt izkārtojumu. Viens ļoti izplatīts piemērs ir gara kopija un ielīmēts URL. Ja šim URL nav defisi, tas var pārsniegt vecāku lodziņu un izskatīties slikti vai sliktāk, radīt izkārtojuma problēmas.

Skatiet CSP-Tricks (@ css-tricks) vietnē Pen Fixing links with word-break with CodePen.

Vērtības

  • normal: vārdu laušanai izmantojiet noklusējuma noteikumus.
  • break-all: jebkurš vārds / burts var ielauzties nākamajā rindā.
  • keep-all: ķīniešu, japāņu un korejiešu valodas teksta vārdi nav salauzti. Pretējā gadījumā tas ir tas pats, kas normal.

Šo īpašību bieži lieto arī kopā ar defisi īpašību, lai pārtraukumu laikā tiktu ievietota zīme, kā tas paredzēts grāmatās.

Pilns lietojums ar nepieciešamajiem piegādātāja prefiksiem ir:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Šo īpašību izmantošana universālajā atlasītājā var būt noderīga, ja jums ir vietne ar lielu lietotāju veidotu saturu. Lai arī godīgs brīdinājums, tas var izskatīties dīvaini virsrakstos un iepriekš formatētā tekstā (

).

Saistīts


    

  • pārplūdes ietīšana
    • 

  • defises
    • 

  • baltā telpa
    • 

  • Apstrāde ar gariem vārdiem un vietrāžiem URL
    • 



Pārlūka atbalsts


Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.


Darbvirsma


 

 

 Chrome Firefox IE Mala Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Mobilais / planšetdators


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7,0-7,1 


 

 



Safari un iOS atbalsta break-allvērtību, bet nekeep-all