overflow-wrapCSS nuosavybė leidžia jums nurodyti, kad naršyklė gali sulaužyti teksto viduje tikslinę elementas liniją ant kelių linijų kitaip neperleidžiama vietoje. Tai padeda išvengti neįprastai ilgos teksto eilutės, sukeliančios išdėstymo problemų dėl perpildymo.
.example ( overflow-wrap: break-word; )Vertybės
normal: numatytasis. Naršyklė pertrauks eilutes pagal įprastas linijų pertraukimo taisykles. Žodžiai ar nenutrūkstamos eilutės nenutrūks, net jei jie perpildys konteinerį.break-word: žodžiai ar simbolių eilutės, kurios yra per didelės, kad tilptų į konteinerį, nutrūks savavališkoje vietoje, kad priverstų pertraukti eilutę. Brūkšnelis nebus įterptas, net jei naudojamahyphenssavybė.inherit: tikslinis elementas turi paveldėtioverflow-wrapturto, apibrėžto jo tiesioginiam tėvui, vertę .
Žemiau pateiktoje demonstracijoje yra perjungimo mygtukas, leidžiantis perjungti tarp normalir break-word.
Peržiūrėkite „Louis Lazaris“ (@impressivewebs) „Pen overflow-wrap / word-wrap“ demonstracinę versiją „CodePen“.
Norėdami parodyti problemą, kurią overflow-wrapbandoma išspręsti, demonstracinė versija naudoja neįprastai ilgą žodį santykinai mažame inde. Kai įjungiate break-word, žodis yra sulaužytas, kad būtų galima užimti nedidelę vietą, tarsi žodis būtų keli žodžiai.
Nenutraukiančių tarpo simbolių eilutė ( ) būtų traktuojama taip pat ir nutrūktų tinkamoje vietoje.
overflow-wrapyra naudinga, kai taikoma elementams, kuriuose yra nemoderuoto vartotojo sukurto turinio (pvz., komentarų skyriai). Tai gali užkirsti kelią ilgiems URL ir kitoms nenutrūkstamoms teksto eilutėms (pvz., Vandalizmui) sugadinti tinklalapio maketą.
Panašumai su word-breaknuosavybe
overflow-wrapir word-breakelgiasi labai panašiai ir gali būti naudojamas panašioms problemoms spręsti. Pagrindinė skirtumo santrauka, kaip paaiškinta CSS specifikacijoje, yra:
overflow-wrappaprastai naudojamas siekiant išvengti problemų, susijusių su ilgomis eilutėmis, dėl kurių sulaužyti maketai dėl teksto, tekančio už konteinerio.word-breaknurodo „soft wrap“ galimybes tarp raidžių, paprastai susietų su tokiomis kalbomis kaip kinų, japonų ir korėjiečių (CJK).
Aprašęs pavyzdžius, kaip word-breakgalima naudoti CJK turinyje, specifikacija sako: „Norėdami įgalinti papildomas pertraukimo galimybes tik perpildymo atveju, žr. overflow-wrap“.
Iš to galime numanyti, kad word-breaktai geriausia naudoti su ne anglišku turiniu, kuriam reikalingos specialios žodžių laužymo taisyklės ir kuris gali būti įsiterpęs į anglišką turinį, tuo tarpu overflow-wrapturėtų būti naudojamas siekiant išvengti sulaužytų išdėstymų dėl ilgų eilučių, nepaisant naudojamos kalbos .
Istorinė word-wrapnuosavybė
overflow-wrapyra standartinis jo pirmtako - word-wrapturto - pavadinimas. word-wrapiš pradžių buvo patentuota tik „Internet Explorer“ funkcija, kuri galiausiai buvo palaikoma visose naršyklėse, nors tai nebuvo standartas.
word-wrappriima tas pačias vertybes kaip overflow-wrapir elgiasi taip pat. Pagal specifikaciją, naršyklės „turi traktuoti word-wrapkaip alternatyvų overflow-wrapnuosavybės pavadinimą , tarsi tai būtų trumpinys overflow-wrap“. Be to, visi naudotojo agentai turi būti palaikomi word-wrapneribotą laiką dėl senų priežasčių.
Tiek overflow-wrapir word-wrappraeis CSS patvirtinimas tol, kol vertintojas yra nustatytas bandymo prieš CSS3 ar didesnis (šiuo metu pagal nutylėjimą).
Susijęs
- žodžių lūžis
- brūkšneliai
- balta vieta
- Ilgų žodžių ir URL tvarkymas
Daugiau informacijos
- „Word-Wrap“: CSS3 ypatybė, veikianti kiekvienoje naršyklėje
- Perpildymo apvyniojimas W3C
- Diskusija apie „Stack Overflow on
word-breakvs.“overflow-wrap
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0–7,1 |
Pirmiau nurodytas „dalinis“ palaikymas yra dėl senesnių naršyklių palaikymo, word-wrapbet ne overflow-wrap. Abiejų naudojimas gali užtikrinti suderinamumą atgal.
Redaktoriaus parengtoje W3C specifikacijos versijoje yra nauja reikšmė, vadinama break-spaces„išsaugotų“ tarpų simbolių sekomis. Nėra žinomos šios funkcijos naršyklės palaikymo ir ji nėra įtraukta į specifikacijos darbo juodraščio versiją.