overflow-wrapĪpašums CSS ļauj noteikt, ka pārlūkprogramma var salauzt teksta rindiņu iekšpusē mērķa elementam uz vairākām pozīcijām, kas citādi neplīstoša vietā. Tas palīdz izvairīties no neparasti garas teksta virknes, kas pārplūdes dēļ rada izkārtojuma problēmas.
.example ( overflow-wrap: break-word; )Vērtības
normal: noklusējums. Pārlūks pārtrauks līnijas saskaņā ar parastajiem līniju pārtraukšanas noteikumiem. Vārdi vai nepārtrauktas virknes netiks salauztas, pat ja tās pārpildīs konteineru.break-word: vārdi vai rakstzīmju virknes, kas ir pārāk lielas, lai ietilptu konteinerā, saplīsīs patvaļīgā vietā, lai piespiestu līnijas pārtraukumu. Defise netiks ievietota, pat jahyphensīpašums tiek izmantots.inherit: mērķa elementam ir jāpārmanto tāoverflow-wrapīpašuma vērtība, kas definēts tā tiešajam vecākam.
Zemāk esošajā demonstrācijā ir pārslēgšanas poga, kas ļauj pārslēgties starp normalun break-word.
Skatiet Louis Lazaris (@impressivewebs) Pen Overflow-wrap / word-wrap demonstrāciju vietnē CodePen.
Lai parādītu problēmu, kuru overflow-wrapmēģina atrisināt, demonstrācijā salīdzinoši nelielā konteinerā tiek izmantots neparasti garš vārds. Ieslēdzot break-word, vārds tiek salauzts, lai tajā būtu maz vietas, it kā vārds būtu vairāki vārdi.
Pret nepārtrauktu atstarpju rakstzīmju virkni ( ) izturēsies tāpat un tā arī saplīsīs atbilstošā vietā.
overflow-wrapir noderīga, ja to lieto elementiem, kas satur nemoderētu lietotāju veidotu saturu (piemēram, komentāru sadaļas). Tas var novērst garu vietrāžu URL un citu nepārtrauktu teksta virkņu (piemēram, vandālisma) sagraušanu tīmekļa lapas izkārtojumā.
Līdzības ar word-breakĪpašumu
overflow-wrapun word-breakizturas ļoti līdzīgi, un to var izmantot līdzīgu problēmu risināšanai. Galvenais atšķirības kopsavilkums, kā paskaidrots CSS specifikācijā, ir:
overflow-wrapParasti tiek izmantots, lai izvairītos no problēmām ar garām virknēm, kas izjauktu izkārtojumu dēļ teksta, kas plūst ārpus konteinera.word-breaknorāda mīkstās iesaiņošanas iespējas starp burtiem, kas parasti saistīti ar tādām valodām kā ķīniešu, japāņu un korejiešu (CJK).
Aprakstījis piemērus, kā to word-breakvar izmantot CJK saturā, speciālists saka: “Lai iespējotu papildu pārtraukuma iespējas tikai pārpildes gadījumā, skatiet overflow-wrap“.
No tā mēs varam domāt, ka word-breakto vislabāk var lietot ar saturu, kas nav angļu valoda un kuram nepieciešami īpaši vārdu laušanas noteikumi, un kas var būt mijiedarbots ar angļu valodas saturu, bet overflow-wraptas jāizmanto, lai izvairītos no salauztiem izkārtojumiem garo virkņu dēļ neatkarīgi no izmantotās valodas .
Vēsturiskais word-wrapīpašums
overflow-wrapir tā priekšgājēja, word-wrapīpašuma standarta nosaukums . word-wrapsākotnēji bija patentēta tikai Internet Explorer funkcija, kas galu galā tika atbalstīta visās pārlūkprogrammās, neskatoties uz to, ka tā nav standarta versija.
word-wrappieņem tādas pašas vērtības kā overflow-wrapun izturas tāpat. Saskaņā ar specifikāciju pārlūkprogrammām “ir jāaplūko īpašuma word-wrapalternatīvais nosaukums overflow-wrap, it kā tas būtu stenogrāfs overflow-wrap”. word-wrapMantotu iemeslu dēļ visiem lietotāju aģentiem ir jāatbalsta uz nenoteiktu laiku.
Abas overflow-wrapun word-wrapizturēs CSS validāciju, kamēr validators ir iestatīts pārbaudīt pret CSS3 vai jaunāku versiju (pašlaik noklusējums).
Saistīts
- vārdu pārtraukums
- defises
- baltā telpa
- Apstrāde ar gariem vārdiem un vietrāžiem URL
Vairāk informācijas
- Word-Wrap: CSS3 īpašums, kas darbojas katrā pārlūkprogrammā
- Pārplūdes iesaiņošana uz W3C
- Diskusija par kaudzes pārpildīšanu
word-breakvs.overflow-wrap
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 |
Iepriekš norādītais “daļējais” atbalsts ir saistīts ar vecāku pārlūkprogrammu atbalstu, word-wrapbet ne overflow-wrap. Izmantojot abus, var nodrošināt savietojamību atpakaļ.
Redaktora W3C specifikācijas melnraksta versijā ir iekļauta jauna vērtība, kas saucas break-spaces“saglabāto” atstarpju rakstzīmju secības. Šai funkcijai nav zināms pārlūka atbalsts, un tas nav iekļauts specifikācijas darba melnraksta versijā.