Väliviivat - CSS-temppuja

Anonim

hyphensOminaisuus valvonta tavutusta tekstin lohkoelementtien. Voit estää tavutuksen tekemisen kokonaan, sallia sen tai sallia sen vain, kun tiettyjä merkkejä on läsnä.

Huomaa, että hyphenskieli on herkkä. Sen kyky löytää taukomahdollisuudet riippuu langvanhemman 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. langAttribuutti on asetettu enpää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 langmää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 hyphensja word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )