hyphens
Ominaisuus valvonta tavutusta tekstin lohkoelementtien. Voit estää tavutuksen tekemisen kokonaan, sallia sen tai sallia sen vain, kun tiettyjä merkkejä on läsnä.
Huomaa, että hyphens
kieli on herkkä. Sen kyky löytää taukomahdollisuudet riippuu lang
vanhemman elementin määritteessä määritetystä kielestä . Kaikkia kieliä ei vielä tueta, ja tuki riippuu tietystä selaimesta.
Syntaksi
p ( hyphens: none | manual | auto )
yhdysmerkit: ei yhtään
Sanoja ei koskaan tavuteta rivinvaihdoissa, vaikka sanan sisällä olevat merkit viittaavat siihen, mihin tavutus voisi tai pitäisi mennä.
väliviivat: manuaalinen
Sanat rikkoutuvat vain rivinvaihdoissa, joissa sanan sisällä on merkkejä, jotka viittaavat rivinvaihtomahdollisuuksiin. On kaksi merkkiä, jotka viittaavat rivinvaihtomahdollisuuteen:
U+2010
(HYPHEN): "kova" väliviiva osoittaa näkyvän rivinvaihtomahdollisuuden. Vaikka viiva ei tosiasiallisesti ole katkennut siinä vaiheessa, väliviiva silti renderöidään. Kirjaimellisesti "-".U+00AD
(UJO): näkymätön, "pehmeä" väliviiva. Tätä merkkiä ei esitetä näkyvästi; sen sijaan se ehdottaa paikkaa, jossa selain voi halutessaan rikkoa sanan. HTML-muodossa voit-
lisätä pehmeän väliviivan.
väliviivat: auto
Sanat voidaan rikkoa sopivissa tavutuskohdissa joko määritettynä sanan sisällä olevilla tavutusmerkeillä (katso yllä) tai määritettynä automaattisesti kielelle sopivalla tavutusresurssilla (jos selain tukee tai tarjoaa niitä @hyphenation-resource
).
Ehdolliset tavutusmerkit sanan sisällä, jos sellaisia on, ovat etusijalla automaattisiin resursseihin nähden, kun määritetään tavutuspisteet sanassa.
väliviivat: kaikki
Vanhentunut, älä käytä . Tämä oli vain teknisesti väliaikaisesti testattavaksi.
Demo
Alla olevassa esittelyssä on joukko kappaleita, ja kaikki on asetettu hyphens: auto;
osoittamaan tavutuksen käsite. lang
Attribuutti on asetettu en
päälle emoelementin.
Katso tämä kynä!
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 |
---|---|---|---|---|
88 | 6 * | 10 * | 12 * | 5,1 * |
Matkapuhelin / tabletti
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | 4,2-4,3 * |
Safari 5+ vaatii -webkit-
, Firefox 6+ vaatii -moz-
, IE 10+ vaatii -ms-
, iOS 4.2+ vaatii -webkit-
.
Chrome <55 ja Android-selain todella tukevat -webkit-hyphens: none
, mikä on oletusarvo, mutta mitään muuta arvoa.
Firefoxissa ja Internet Explorerissa automaattinen tavutus toimii vain joillakin kielillä (määritetty lang
määritteen kanssa). Tässä huomautuksessa on kattava luettelo tuetuista kielistä.
Jos kirjoitat verkkopohjaista asiakirjaa, joka todella tarvitsee tavutusta, voit käyttää Hyphenator.js-kirjastoa, joka perustuu laajaan sanakirjaan ja joka automaattisesti lisää pehmeät väliviivat ja nollaleveydet välilyönteihin.
Ilman JavaScriptiä sinun on luotettava molempiin hyphens
ja word-wrap
:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )