Pitkien sanojen Css-kääritys. Rivinvaihtojen lisääminen CSS-ominaisuuksien avulla

Kotiin / Jäätyy

Internet koostuu sisällöstä, sisältö koostuu sanoista, ja sanat voivat olla hyvin, hyvin pitkiä. Ja ennemmin tai myöhemmin verkkovastaava kohtaa pitkien sanojen tavutuksen ongelman. Tämä ongelma on erityisen tärkeä responsiivisessa suunnittelussa ja pienissä sisältölohkoissa. Joten miten käsittelet tätä ongelmaa?

Tavuviiva

Ensimmäinen ratkaisu pitkien sanojen tavuttamiseen on käyttää tavuviivaa.

Defisi ( -webkit-yhdysmerkit: auto; -moz-yhdysmerkit: auto; -ms-yhdysmerkit: auto; yhdysmerkit: auto; )

Selaintuki: CSS-yhdysviivoja tukevat lähes kaikki nykyaikaiset selaimet, paitsi Chrome, Opera ja Android. Myös hyvin usein väliviiva lisätään paikkoihin, jotka ovat kieliopillisesti virheellisiä.

Sanan tauko

Sanankatko on CSS-ominaisuus, joka ilmaisee, pitäisikö rivit rikkoa sanoissa.

Obriv-slova ( -ms-word-break: break-all; word-break: break-all; word-break: break-word; )

Selaintuki: Sananvaihtoja tuetaan kaikissa selaimissa paitsi Opera Minissä ja Operan vanhemmissa versioissa.

Ylivuotokääre

Seuraava ratkaisu on käyttää ylivuotokäärettä.

Obertka-perepolneniya ( sanan rivitys: murtosana; ylivuoto: murtosana; )

Selaintuki: Tuettu melkein kaikissa selaimissa. Huomautus: Jotkin selaimet vaativat "word-wrap":n käyttöä "overflow-wrap" sijaan.

ellipsi

Toinen vaihtoehto on käyttää ellipsiä.

Multigotochiye ( ylivuoto: piilotettu; välilyönti: ei rivitystä; tekstin ylivuoto: ellipsi; )

Selaintuki: Kaikki nykyaikaiset selaimet tukevat.

Tämä menetelmä toimii, mutta on kaukana ihanteellisesta.

Lopullinen ratkaisu: Ylivuoto- ja tavumerkkikääreen käyttäminen.

Finalnoye-resheniye ( ylivuodon rivitys: break-word; word-wrap: break-word; -webkit-yhdysmerkit: auto; -ms-yhdysmerkit: auto; -moz-yhdysmerkit: auto; tavuviivat: auto; )

Tämä ratkaisu sallii sitä tukevan selaimen lisätä väliviivan ja selaimet, jotka eivät tue sitä, voivat lisätä rivinvaihdon.

Hei kaikille ja aloitetaan. Oletetaan, että meillä on seuraava teksti:

Yhdistyneiden arabiemiirikuntien hallitus ja hallinto keskittävät tähän kaupunkiin kaikki uusimmat tekniikat, jotka perustuvat tieteen ja teknologian uusimpiin saavutuksiin, yrittäen tehdä siitä tulevaisuuden kaupungiksi, ikään kuin suoraan tieteiskirjallisuuden ruudulta. elokuva. Näitä teknologioita ovat muun muassa robottipoliisit, robottiautot ja Hyperloop-kuljetusjärjestelmä, ja lähitulevaisuudessa Dubaissa alkaa toimia automatisoitu lentävä taksipalvelu. Ja tätä tapahtumaa valmisteltaessa taksina käytettävä sähköinen kaksipaikkainen Volocopter-lentokone, jossa on 18 roottoria, teki ensimmäisen lentonsa automaattitilassa, he kirjoittavat...

Tässä on tekstiä, jonka kanssa alamme nyt työskennellä.

Ja ensimmäinen ominaisuus, jota tarkastelemme, on nimeltään sananvaihto

sananvaihto: normaali | säilytä kaikki | katkaista kaikki

Olemme pääasiassa kiinnostuneita tämän normaalin ominaisuuden kahdesta arvosta - oletusarvosta ja break-all-arvosta, joiden avulla toteamme, että sanan rivitys suoritetaan merkki merkiltä. Mitä tulee Keep-all -arvoon, tätä arvoa käytetään kiinan-, japanin- ja koreakielisten sanojen käärimiseen.

P( sananvaihto: katkaise kaikki;. )

Huomaa, että käytön jälkeen tästä tyylistä kaikki tekstimme on venytetty täyteen käytettävissä olevaan leveyteen ja yhdysviivat eivät ole sanoja, vaan merkkejä. Tämä ominaisuus voi olla hyödyllinen, kun meillä on erittäin pitkä sana, joka ei sovi määritettyyn leveyteen. Tämä aiheuttaa kuitenkin jonkinlaista haittaa, koska ehdottomasti kaikki sanat siirretään merkki kerrallaan, myös ne, jotka sopivat annettuun leveyteen.

Onneksi on olemassa samanlainen ominaisuus, joka siirtää vain sanoja, jotka eivät sovi merkkeihin. Sitä kutsutaan overflow-wrap:ksi:

P(ylivuodon rivitys: välisana; )

ja murtosana-arvon käytön jälkeen kaikki tekstimme siirretään sana sanalta ja sanat, jotka eivät mahdu määritettyyn leveyteen, siirretään merkki kerrallaan. Voimme sanoa, että tehtävä on suoritettu! Taustasanan arvon lisäksi tämä ominaisuus hyväksyy:

ylivuotokääre: normaali | murtosana | periä;

Siirrytään nyt edistyneempään css-ominaisuuteen tekstin rivittämistä varten.

Tarkastellaanpa white-space-ominaisuutta, jolla voimme jäljitellä esitunnisteen toimintaa muuttamatta itse tekstiä monospaceksi.

välilyönti: normaali | nowrap | ennen | esilinja | esikääre | periä

Käytännössä tätä ominaisuutta käyttämällä käytämme tekstissä vain välilyöntejä. Jos esimerkiksi käytämme tekstiimme seuraavaa tyyliä:

Tyhjä välilyönti: nowrap;

kaikki rivinvaihdot ohitetaan ja tekstimme näytetään yhtenä rivinä.

Tyhjä välilyönti: pre;

Jos arvo on pre, kaikki rivinvaihdot ovat samanlaisia ​​kuin lähdekoodissa. Lisäksi, jos teksti ei mahdu määritettyyn leveyteen, sitä ei siirretä. Jos haluamme sen siirrettävän, meidän on määritettävä esirivin arvo.

Jos haluamme ottaa huomioon paitsi rivinvaihdot lähdekoodi, mutta myös välilyönnit sanojen välillä, sinun on määritettävä:

Tyhjä tila: esikääre;

Siinä on pohjimmiltaan kaikki, mitä halusin kertoa sanan tavutuksesta CSS:n avulla. Toivon, että tämä artikkeli oli hyödyllinen sinulle ja käytät saamaasi tietoa useammin kuin kerran.

No, sanon hyvästit sinulle. Toivon sinulle menestystä ja onnea! Heippa!

Vlad Merževitš

Toisin kuin painetussa tekstissä, yhdysviivoja käytetään harvoin verkkosivuilla, koska emme ole tiukasti sidottu paperimuotoon. Sivustoja voidaan katsella eri näytöillä, eri resoluutioilla, eri tavalla käyttöjärjestelmät ja selaimet. Kaikki tämä synnyttää sellaisen yhdistelmien yhdistelmän, että on mahdotonta ennustaa, miltä lopullinen teksti tulee näyttämään käyttäjän kannalta. Tästä johtuen teksti on yleensä tasattu vasemmalle ja väliviivat esiintyvät kokonaisissa sanoissa. Sanojen tavuttaminen on kuitenkin tarpeen joissakin tapauksissa, esimerkiksi kun pitkiä kemiallisia tai lääketieteellisiä termejä käytetään tietyn leveyden kapeissa sarakkeissa estetiikan vuoksi. HTML- ja CSS-käsikirjassa tai automaattiset menetelmät Tavuviivoja ei ole niin monta lisättävää, joten luettelen ne kaikki.

Tunnisteen käyttäminen

Tag käyttöön HTML5:ssä ja luo tarvittaessa rivitys. Näissä paikoissa, joissa venäjän kielen sääntöjen mukaan tavutus on sallittu, lisäämme (esimerkki 1). Jos koko sana mahtuu annettuun leveyteen, tämä tunniste ei ilmene millään tavalla, emmekä edes tiedä sen olemassaolosta. Jos sana ei sovi, selain on tunnisteen sijainnissa luo siirron.

Esimerkki 1. Tag

Siirrot

Yksi kahdestoista luokka unelmoija Anzhelika valitsi koulusta valmistumisen jälkeen liiketoiminnan ammatin tuotettu kuljettaja nujerrettu.

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Teksti yhdysviivalla

Pehmeä siirto

Sovellus sillä on vakava haittapuoli - on mahdotonta ymmärtää, onko se yhdysmerkki edessämme vai erillinen sana toisella rivillä. Tämän vuoksi lauseen merkitys voi kadota ja se voidaan ymmärtää väärin. Tavuviivat tulee tehdä typografian sääntöjen mukaisesti, nimittäin: lisää yhdysviiva rivin loppuun. Pehmeä tavutus selviää tästä hyvin HTML-koodissa on sille erityinen merkki - . Se toimii samassa roolissa kuin tunniste - ei näy tavallisessa tekstissä ja siirtää sanan toiselle riville samalla kun lisää yhdysviivaa (esimerkki 2).

Esimerkki 2: Pehmeä siirto

Siirrot

Yhdennentoista luokan oppilas Angelica valitsi koulusta valmistuttuaan yrityskuljettajan ammatin.

Tämän esimerkin tulos on esitetty kuvassa. 2. Huomaa, kuinka paljon esteettisemmälle ja selkeämmälle teksti näyttää verrattuna kuvaan. 1.

Riisi. 2. Teksti yhdysviivalla

sananvaihtoominaisuus

Voit automatisoida väliviivojen luontiprosessin käyttämällä sananvaihto-ominaisuutta arvon break-all kanssa (esimerkki 3). Sinun ei enää tarvitse lisätä symboleja tai tunnisteita HTML-tyyleihin.

Esimerkki 3. Sananvaihdon käyttö

Siirrot

Yhdestoista luokkalainen Angelica valitsi toimistotyöntekijän ammatin valmistuttuaan koulusta.

Tämän esimerkin tulos on esitetty kuvassa. 3. Tekstin tavutussääntöjä ei tässä tapauksessa oteta huomioon, joten sanoja voidaan tavuttaa hyvin oudolla tavalla.

Riisi. 3. Teksti yhdysviivalla

Kaikista luetelluista menetelmistä "puolimanuaalisen" käyttö antaa parhaan tuloksen - venäjän kielen sääntöjä noudatetaan, teksti näyttää esteettisesti miellyttävimmältä. Käytä sitä, kun tekstissä on pitkiä sanoja.

Tavuviivojen ominaisuus

Ja lopuksi tehokkain ja kätevin omaisuus automaattinen lisäys tavuviivat - tavuviivat. Sen toiminta perustuu selaimen sisäänrakennettuun tavutussanakirjaan, joten se antaa parhaan tuloksen. Tuettu IE10:ssä, Firefoxissa, Androidissa ja iOS:ssä. Chrome ja Opera eivät tue. Jotta tämä toimisi, jotta tunniste lisää lang-attribuutti arvolla ru (esimerkki 4).

Esimerkki 4: Tavuviivojen käyttö

Siirrot

Yhdestoista luokkalainen Angelica valitsi toimistotyöntekijän ammatin valmistuttuaan koulusta.

Tämän esimerkin tulos on esitetty kuvassa. 4.

Riisi. 4. Teksti yhdysviivalla

Siirtojen kielto

Usein syntyy päinvastainen tehtävä - kieltää tavutus paikoissa, joissa niitä ei voida hyväksyä kielen sääntöjen mukaan. Et voi esimerkiksi erottaa mittayksiköitä numerosta (10 ml), vuoden merkinnästä (54 eKr.), nimikirjaimista sukunimestä, katkaista vakiintuneita lyhenteitä (jne.) jne. Jotta selain ei lisää yhdysmerkkejä osoitteessa tilalle, se tulee korvata rikkoutumattomalla välillä (esimerkki 5).

Esimerkki 5: Käyttö

Siirrot

Järvi koordinaateissa 70° 58′ 19″ pohjoista leveyttä. w. 97° 24′ 5″ itäistä pituutta. sijaitsee Taimyr Dolgano-Nenetsien alueella Krasnojarskin alue

Venäjä.

Välilyöntiominaisuus määrittää, kuinka sanojen välissä näytetään välilyönnit. Normaaleissa olosuhteissa mikä tahansa määrä välilyöntejä HTML-koodissa näkyy yhtenä verkkosivulla. Poikkeus on elementti

, tähän säilöön sijoitettu teksti tulostetaan kaikilla välilyönneillä käyttäjän muotoilemassa muodossa.  Joten tyhjä tila simuloi työtä 
Mutta toisin kuin se, se ei muuta fonttia monospaceksi.

Lyhyt tiedot

Nimitykset

KuvausEsimerkki
<тип> Ilmaisee arvon tyypin.<размер>
A && BArvot on annettava määritetyssä järjestyksessä.<размер> && <цвет>
A | BIlmaisee, että sinun on valittava vain yksi arvo ehdotetuista arvoista (A tai B).normaali | pienet kirjaimet
A || BJokaista arvoa voidaan käyttää itsenäisesti tai yhdessä muiden kanssa missä tahansa järjestyksessä.leveys || laskea
Ryhmien arvot.[ sato || risti ]
* Toista nolla tai useampia kertoja.[,<время>]*
+ Toista yksi tai useampia kertoja.<число>+
? Määritetty tyyppi, sana tai ryhmä on valinnainen.upotettu?
(A, B)Toista vähintään A, mutta enintään B kertaa.<радиус>{1,4}
# Toista yksi tai useampi kertaa pilkuilla erotettuina.<время>#
×

Arvot

normaali Selainikkunan teksti näkyy tavalliseen tapaan, rivinvaihdot asetetaan automaattisesti. nowrap Välilyöntejä ei oteta huomioon, HTML-koodin rivinvaihdot ohitetaan, kaikki teksti näytetään yhdellä rivillä; samalla lisäämällä
rivittää tekstin uudelle riville. pre Teksti näytetään ottaen huomioon kaikki välilyönnit ja yhdysmerkit, sellaisina kuin kehittäjä on lisännyt ne HTML-koodiin. Jos rivi on liian pitkä eikä mahdu selainikkunaan, vaakasuuntainen vierityspalkki lisätään. pre-line Välilyöntejä ei oteta huomioon tekstissä, jos teksti ei mahdu määritetylle alueelle, se siirtyy automaattisesti seuraavalle riville. esirivi Kaikki välilyönnit ja vaihdot säilyvät tekstissä, mutta jos rivin leveys ei mahdu määritetylle alueelle, teksti rivitetään automaattisesti seuraavalle riville.

Arvojen vaikutus tekstiin on esitetty taulukossa. 1.

Esimerkki

tyhjä tila

Esimerkki

Fermatin viimeinen lause
X n+ Y n= Z n
jossa n on kokonaisluku > 2

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Tyhjennysominaisuuden käyttäminen

Objekti malli

Esine.style.whiteSpace

Huom

Selain Internet Explorer versio 7.0 mukaan lukien ei tue pre-line ja pre-wrap arvoja. varten