overflow-wrapVara CSS võimaldab määrata, et brauser saab murda rida teksti sees suunatud element peale mitu rida muidu purunematu koht. See aitab vältida ebatavaliselt pikka tekstistringi, mis põhjustab ülevoolu tõttu paigutusprobleeme.
.example ( overflow-wrap: break-word; )Väärtused
normal: vaikimisi. Brauser katkestab read vastavalt tavalistele joone rikkumise reeglitele. Sõnad või katkematud stringid ei purune, isegi kui need konteinerist üle voolavad.break-word: sõnad või tähemärkide stringid, mis on mahuti sisse mahutamiseks liiga suured, murduvad suvalises kohas, et sundida reavahetust tegema. Sidekriipsu ei lisata, isegi kui sedahyphensomadust kasutatakse.inherit: sihitud element peab pärima selleoverflow-wrapvahelisel vanemal määratletud vara väärtuse .
Alloleval demol on ümberlülitusnupp, mis võimaldab vahetada normalja vahel break-word.
Vaadake CodePenist Louis Lazarise (@impressivewebs) pliiatsi ületäitmise / sõna mähkimise demo.
Et näidata probleemi overflow-wrapkatsed lahendada, demo kasutab ebatavaliselt pikk sõna sees suhteliselt väike konteiner. Kui lülitate sisse break-word, siis sõna on katki, et mahutada vähe ruumi, nagu oleks sõna mitu sõna.
Murdumatu tühimärgi ( ) stressi koheldakse samamoodi ja see puruneb ka sobivas kohas.
overflow-wrapon kasulik, kui rakendada elementidele, mis sisaldavad modereerimata kasutaja loodud sisu (nt kommentaaride jaotised). See võib takistada pikkade URL-ide ja muude katkematute tekstistringide (nt vandalism) rikkumist veebilehe kujunduses.
Sarnasused word-breakvaraga
overflow-wrapja word-breakkäituda väga sarnaselt ning seda saab kasutada sarnaste probleemide lahendamiseks. CSS-i spetsifikatsioonis selgitatud erinevuse põhikokkuvõte on järgmine:
overflow-wrapkasutatakse tavaliselt selleks, et vältida probleeme pikkade stringidega, mis põhjustavad mahutist väljapoole voolava teksti tõttu purustatud paigutusi.word-breakmäärab pehmete pakkimisvõimaluste tähtede vahel, mis on tavaliselt seotud selliste keeltega nagu hiina, jaapani ja korea (CJK).
Kirjeldades näiteid selle kohta, kuidas word-breaksaab CJK-s sisu kasutada, ütleb spetsifikatsioon: „Täiendavate pausivõimaluste lubamiseks ainult ülevoolu korral vaadake overflow-wrap“.
Selle põhjal võime oletada, et seda word-breakon kõige parem kasutada mitte-ingliskeelse sisu puhul, mis nõuab konkreetseid sõnasulgeid reegleid ja mis võib olla inglisekeelse sisuga, samas kui overflow-wrapseda tuleks kasutada pikkade stringide tõttu katkiste paigutuste vältimiseks, olenemata kasutatavast keelest .
Ajalooline word-wrapvara
overflow-wrapon selle eelkäija word-wrapvara nimetus . word-wrapoli algselt ainult Internet Exploreri omandis olev funktsioon, mida lõpuks toetati kõigis brauserites, hoolimata sellest, et see pole standard.
word-wrapaktsepteerib samu väärtusi overflow-wrapja käitub samamoodi. Vastavalt spetsifikatsioonile peavad brauserid „käitlema vara word-wrapalternatiivse nimena overflow-wrap, justkui oleks tegemist lühikese kirjaga overflow-wrap”. Samuti peavad kõik kasutajaagendid pärandküsimustel word-wraplõputult toetama .
Mõlemad overflow-wrapja word-wrapläbivad CSS-i valideerimise seni, kuni valideerija on seatud testima CSS3 või uuema versiooni suhtes (praegu vaikimisi).
Seotud
- sõnamurd
- sidekriipsud
- tühik
- Pikkade sõnade ja URL-ide käitlemine
Rohkem informatsiooni
- Word-Wrap: CSS3 atribuut, mis töötab igas brauseris
- W3C ülevoolu pakkimine
- Arutelu virnade ülevoolu kohta
word-breakvs.overflow-wrap
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0–7,1 |
Eespool nimetatud „osaline” tugi on tingitud vanematest brauseritest, word-wrapkuid mitte overflow-wrap. Mõlema kasutamine tagab tagurpidi ühilduvuse.
Redaktori W3C spetsifikatsiooni mustandversioon sisaldab uut väärtust nimega, break-spacesmis käsitleb "konserveeritud" tühimärkide järjestusi. Selle funktsiooni jaoks pole teadaolevat brauserituge ja see ei sisaldu spetsifikatsiooni töö mustandversioonis.