overflow-wrapOmaisuus CSS voit määrittää, että selain voi rikkoa rivi tekstiä sisälle kohdennettu elementin päälle monirivisille muuten särkymätön paikka. Tämä auttaa välttämään epätavallisen pitkää tekstijonoa, joka aiheuttaa asetteluongelmia ylivuodon vuoksi.
.example ( overflow-wrap: break-word; )Arvot
normal: oletusarvo. Selain rikkoo linjat normaalien rivinvaihtosääntöjen mukaisesti. Sanat tai katkeamattomat merkkijonot eivät riko, vaikka ne ylittävät säiliön.break-word: sanat tai merkkijonot, jotka ovat liian suuria sopimaan säiliöönsä, rikkoutuvat mielivaltaisessa paikassa pakottaakseen rivinvaihdon. Väliviivaa ei lisätä, vaikkahyphensominaisuutta käytetään.inherit: Kohdistetun elementin on perittäväoverflow-wrapvälittömän ylätason määritetyn ominaisuuden arvo .
Alla olevassa esittelyssä on vaihtopainike, jonka avulla voit vaihtaa normalja break-word.
Katso Louis Lazariksen (@impressivewebs) Pen overflow-wrap / word-wrap -demo CodePenistä.
overflow-wrapDemon osoittaakseen ongelman, joka yrittää ratkaista, demo käyttää epätavallisen pitkää sanaa suhteellisen pienessä astiassa. Kun valitset vaihtoehdon break-word, sana rikkoutuu pienen käytettävissä olevan tilan mukaan, ikään kuin sana olisi useita sanoja.
Murtumatonta välilyöntiä ( ) merkitsevää merkkijonoa kohdellaan samalla tavalla ja se myös hajoaa sopivassa paikassa.
overflow-wrapon hyödyllinen, kun sitä käytetään elementteihin, jotka sisältävät valvomatonta käyttäjän luomaa sisältöä (kuten kommenttiosastot). Tämä voi estää pitkiä URL-osoitteita ja muita katkeamattomia tekstijonoja (esim. Vandalismi) rikkomasta verkkosivun asettelua.
Samankaltaisuudet word-breakkiinteistön kanssa
overflow-wrapja word-breakkäyttäytyvät hyvin samankaltaisesti, ja sitä voidaan käyttää vastaavien ongelmien ratkaisemiseen. Perusyhteenveto erosta, kuten CSS-määrittelyssä selitetään, on:
overflow-wrapSitä käytetään yleensä välttämään pitkien merkkijonojen aiheuttamat ongelmat, jotka aiheuttavat rikkoutuneita asetteluja säiliön ulkopuolelle virtaavan tekstin vuoksi.word-breakmäärittää pehmeän rivityksen mahdollisuudet sellaisten kirjainten välillä, jotka liittyvät yleisesti kieliin, kuten kiina, japani ja korea (CJK).
Kuvattuaan esimerkkejä siitä, miten word-breakCJK-sisältöä voidaan käyttää, tekninen asiantuntija sanoo: "Jos haluat ottaa käyttöön lisää katkaisumahdollisuuksia vain ylivuototapauksissa, katso overflow-wrap".
Tästä voimme olettaa, että sitä word-breakvoidaan parhaiten käyttää muulla kuin englanninkielisellä sisällöllä, joka vaatii erityisiä sananmurtosääntöjä ja joka saattaa olla englanninkielisen sisällön kanssa overflow-wrapleikattu , mutta sitä tulisi käyttää välttämään pitkien merkkijonojen aiheuttamia rikkoutuneita asetteluja käytetystä kielestä riippumatta. .
Historiallinen word-wrapomaisuus
overflow-wrapon edeltäjänsä, word-wrapkiinteistön standardinimi. word-wrapoli alun perin omistettu vain Internet Explorer -ominaisuus, jota lopulta tuettiin kaikissa selaimissa, vaikka se ei ollut vakio.
word-wraphyväksyy samat arvot kuin overflow-wrapja käyttäytyy samalla tavalla. Spesifikaation mukaan selainten "on kohdeltava ominaisuuden word-wrapvaihtoehtoisena nimellä overflow-wrap, ikään kuin se olisi lyhenne overflow-wrap". Kaikkien käyttäjäagenttien on myös tuettava word-wraploputtomiin vanhoista syistä.
Molemmat overflow-wrapja word-wrapläpäisevät CSS-vahvistuksen, kunhan validointilaite on asetettu testaamaan CSS3: ta tai uudempaa vastaan (tällä hetkellä oletus).
Liittyvät
- sananvaihto
- väliviivat
- välilyönti
- Pitkien sanojen ja URL-osoitteiden käsittely
Lisää tietoa
- Word-Wrap: CSS3-ominaisuus, joka toimii jokaisessa selaimessa
- Ylivuotoinen kääriminen W3C: ssä
- Keskustelu pinon ylivuodosta
word-breakvs.overflow-wrap
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Edellä mainittu "osittainen" tuki johtuu vanhemmista selaimista, word-wrapmutta ei overflow-wrap. Molempien käyttö voi taata yhteensopivuuden taaksepäin.
Toimittajan luonnos W3C-spesifikaatiosta sisältää uuden arvon nimeltä nimeltä, break-spacesjoka käsittelee "säilyneiden" välilyöntien sekvenssejä. Tälle toiminnolle ei ole tunnettua selaintukea, eikä se sisälly teknisen version luonnosversioon.