Sananvaihto - CSS-temppuja

Anonim

word-breakOmaisuus CSS voidaan muuttaa milloin rivinvaihtojen pitäisi tapahtua. Normaalisti rivinvaihdot tekstissä voivat tapahtua vain tietyissä tiloissa, kuten silloin, kun on välilyönti tai yhdysmerkki.

Alla olevassa esimerkissä voimme tehdä word-breakkirjainten väliin sen sijaan:

p ( word-break: break-all; )

Jos asetamme sitten tekstin leveyden yhdeksi em, sana hajoaa jokaisen kirjaimen mukaan:

Katso Kynän asetus -teksti pystysuunnassa CSS-Tricks-sananvaihdolla (@ css-tricks) CodePenillä.

Tätä arvoa käytetään usein paikoissa, joissa on käyttäjän luomaa sisältöä, jotta pitkät merkkijonot eivät vaaranna asettelun rikkomista. Yksi hyvin yleinen esimerkki on pitkä kopio ja liitetty URL. Jos kyseisessä URL-osoitteessa ei ole väliviivoja, se voi ulottua ylätason ruudun ulkopuolelle ja näyttää huonolta tai pahemmalta, aiheuttaa asetteluongelmia.

Katso CSS-Tricksin (@ css-tricks) Kynän kiinnityslinkit sananvaihdolla -koodilla.

Arvot

  • normal: käytä oletussääntöjä sanojen rikkomiseen.
  • break-all: mikä tahansa sana / kirjain voi siirtyä seuraavalle riville.
  • keep-all: kiina-, japani- ja korealaiset tekstisanat eivät ole rikki. Muuten tämä on sama kuin normal.

Tätä ominaisuutta käytetään myös usein yhdysviivan ominaisuuden yhteydessä, joten taukojen sattuessa lisätään kirjoitusmerkki kirjojen standardin mukaisesti.

Täysi käyttö ja tarvittavat toimittajan etuliitteet ovat:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Näiden ominaisuuksien käyttäminen yleisvalitsimessa voi olla hyödyllistä, jos sinulla on sivusto, jossa on paljon käyttäjien luomaa sisältöä. Vaikka se on varovainen, se voi näyttää oudolta otsikoilta ja valmiiksi muotoillulta tekstiltä (

).

Liittyvät


    

  • ylivuoto
    • 

  • väliviivat
    • 

  • välilyönti
    • 

  • Pitkien sanojen ja URL-osoitteiden käsittely
    • 



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 


 

 



Safari ja iOS tukevat break-allarvoa, mutta eivätkeep-all