Css-pisteitä, jos se ei sovi. Yksi- tai monirivisen tekstin leikkaaminen korkeuteen lisäämällä ellipsi

Joissakin tapauksissa lohkon sisältö näkyy elementin rajojen ulkopuolella ja menee päällekkäin. Voit hallita lohkotason elementtien toimintaa ylivuotoominaisuuden avulla, joka määrittää, kuinka lohkon ulkopuolelle ulottuva sisältö näytetään.

Leikeominaisuuden avulla voit rajata elementin määritettyihin mittoihin.

1. Ylivuotoominaisuus

Lohkoelementtien sisältö voi vuotaa lohkon yli, kun lohkolla on selkeä korkeus ja/tai leveys. Korkeutta määrittämättä lohko venyy sisällön mukaan, ellei lohkoa ole sijoitettu kohtaan: absoluuttinen; tai sijainti: kiinteä; . Teksti voi ylittää lohkon korkeudessa, kuvat - korkeudessa ja leveydessä.

2. Ylivuoto-x-ominaisuus

Ominaisuus määrittää, kuinka lohkon sisällä olevan sisällön oikea reuna leikataan pois, jos se vuotaa yli.

Syntaksi:

Div ( ylivuoto-x: piilotettu; )

3. Ylivuoto-y-ominaisuus

Ominaisuus määrittää, kuinka lohkon sisällä olevan sisällön alareuna leikataan, jos se vuotaa yli.

Syntaksi:

Div (overflow-y: piilotettu; )

4. Leikkeen ominaisuus

Ominaisuus määrittää, kuinka suuri osa elementistä on näkyvissä. Elementin osaa, joka jää näkyviin trimmauksen jälkeen, kutsutaan leikkausalueeksi. Leikkaus käytetään elementtiin, joka on alun perin täysin näkyvissä. Ominaisuus koskee elementtejä, joiden sijaintiominaisuus on asetettu absoluuttiseksi tai kiinteäksi.

On mielivaltaisen pituista tekstiä, joka on näytettävä kiinteän korkeuden ja leveyden lohkossa. Tässä tapauksessa, jos teksti ei mahdu kokonaan, tulee näkyviin tekstikatkelma, joka sopii täysin annettuun lohkoon, minkä jälkeen asetetaan ellipsi.

Tämä tehtävä on melko yleinen, mutta samalla se ei ole niin triviaali kuin miltä näyttää.

Vaihtoehto yksiriviselle tekstille CSS:ssä

Tässä tapauksessa voit käyttää text-overflow: ellipsis -ominaisuutta. Tässä tapauksessa säiliöllä on oltava omaisuus ylivuoto yhtäläinen piilotettu tai leike

Estä ( leveys : 250 pikseliä ; välilyönti : ei rivitystä ; ylivuoto : piilotettu ; tekstin ylivuoto : ellipsi ; )

Vaihtoehto moniriviselle tekstille CSS:ssä

Ensimmäinen tapa leikata monirivistä tekstiä on käyttää CSS-ominaisuudet käyttää pseudoelementtejä :ennen Ja :jälkeen. Aloitetaan HTML-merkinnät

Ja nyt itse kiinteistöt

Laatikko ( ylivuoto : piilotettu ; korkeus : 200px ; leveys : 300px ; rivin korkeus : 25px ; ) .box :before (sisältö : "" ; float : left ; leveys : 5px ; korkeus : 200px ; ) .first > -lapsi ( kellua : oikea ; leveys : 100 % ; margin-vasen : -5px ; ) .box :after ( sisältö : "\02026" ; laatikon koko : content-box ; float : oikea ; sijainti : suhteellinen ; yläosa : -25px : 3em ; tausta-koko : 100% 100% (255, 255, 255, 0), valkoinen ;

Toinen tapa on käyttää sarakkeen leveysominaisuutta, jolla asetamme sarakkeen leveyden moniriviselle tekstille. Tätä menetelmää käytettäessä ei kuitenkaan ole mahdollista asettaa ellipsiä loppuun. HTML:

Estä ( ylivuoto : piilotettu ; korkeus : 200 pikseliä ; leveys : 300 kuvapistettä ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; sarakkeen leveys : 150:x1)

On olemassa kolmas tapa ratkaista monirivinen teksti käyttämällä CSS:ää selaimille Webkit. Siinä meidän on käytettävä useita erityisiä ominaisuuksia etuliitteen kanssa -verkkopaketti. Tärkein niistä on -webkit-line-clamp, jonka avulla voit määrittää lohkossa tulostettavien rivien määrän. Ratkaisu on kaunis, mutta melko rajallinen, koska se toimii rajoitetussa selainryhmässä

Estä ( ylivuoto : piilotettu ; teksti ylivuoto : ellipsi ; näyttö : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : pystysuora ; )

Vaihtoehto moniriviselle tekstille JavaScriptissä

Tässä käytetään ylimääräistä näkymätöntä lohkoa, johon tekstimme sijoitetaan alun perin, jonka jälkeen se poistetaan merkki kerrallaan, kunnes tämän lohkon korkeus on pienempi tai yhtä suuri kuin korkeus haluttu lohko. Ja lopussa teksti siirretään alkuperäiseen lohkoon.

var block = asiakirja. querySelector(.block"), teksti = lohko. innerHTML, klooni = asiakirja. createElement("div");

klooni tyyli. sijainti = "absoluuttinen" ;

(funktio ($ ) ( var truncate = funktio (el ) ( var teksti = el. teksti (), korkeus = el. korkeus (), klooni = el. klooni (); klooni . css (( sijainti : "absoluuttinen", näkyvyys : " piilotettu " , korkeus : " auto " )); ( klooni . teksti ( teksti . alimerkkijono ( 0 , l ) + "..." ); el. teksti ( klooni . poista ( ) ); ( palauta tämä . jokainen (funktio () ( katkaista ( $ ( tämä )); ) ( jQuery ));

Ongelma

Kulmien leikkaaminen ei ole vain kyse nopea tapa saavuttaa tavoitteen, mutta myös suosittu muotoiluvaihtoehto sekä paino- että web-suunnittelussa. Useimmiten se sisältää yhden tai useamman säiliön kulman leikkaamisen 45° kulmassa. IN viime aikoina, johtuen siitä, että skeuomorfismi on alkanut menettää jalansijaa litteälle suunnittelulle, tämä vaikutus on erityisen suosittu. Kun kulmat leikataan vain toiselta puolelta ja jokainen kulma vie 50 % elementin korkeudesta, syntyy nuolen muotoinen muoto, jota käytetään usein myös painikkeiden ja navigointielementtien suunnittelussa.

CSS:llä ei kuitenkaan vieläkään ole tarpeeksi työkaluja tämän tehosteen luomiseen yksinkertaisilla, yksinkertaisilla yksilinjaisilla. Tämän vuoksi monet kehittäjät käyttävät taustakuvia: Peitä leikatut kulmat kolmioilla (yksivärisellä taustalla) tai luo koko tausta käyttämällä yhtä tai useampaa kuvaa, jossa kulmat on jo leikattu. Ilmeisesti tällaiset menetelmät ovat täysin joustamattomia, vaikeita ylläpitää ja lisäävät latenssia ylimääräisten HTTP-pyyntöjen ja verkkosivuston tiedostojen kokonaiskoon vuoksi.

Esimerkki verkkosivustosta, jossa leikattu kulma (puoliläpinäkyvän Find & Book -kentän vasemmassa alakulmassa) sopii täydellisesti suunnitteluun

Ratkaisu

Yksi mahdollinen ratkaisu tarjota meille kaikkivaltiaat CSS-gradientit. Oletetaan, että haluamme vain yhden leikatun kulman, esimerkiksi oikean alakulman. Temppu on hyödyntää gradienttien kykyä ottaa kulman suunta (esimerkiksi 45 astetta) ja värisiirtymän rajojen sijainti absoluuttisina arvoina, jotka eivät muutu, kun elementin kokonaismitat, joihin tausta kuuluu muuttaa. Yllä olevasta seuraa, että yksi lineaarinen gradientti riittää meille.

Lisäämme läpinäkyvän häivytysreunuksen leikatun kulman luomiseksi ja toisen häivytysreunuksen samaan kohtaan, mutta taustaa vastaavalla värillä. CSS-koodi on seuraava (15px-kulmalle):

tausta: #58a;
background:linear-gradient(-45 astetta, läpinäkyvä 15px, #58a 0);

Yksinkertaista, eikö? Voit nähdä tuloksen kuvasta.

Teknisesti emme edes tarvitse ensimmäistä ilmoitusta. Lisäsimme sen vain kiertotapana: jos CSS-gradientteja ei tueta, toinen ilmoitus ohitetaan, joten saamme ainakin tasavärisen taustan. Oletetaan nyt, että tarvitsemme kaksi leikattua kulmaa, sanotaan molemmat alakulmat. Tätä ei voida tehdä vain yhdellä gradientilla, joten tarvitsemme kaksi. Ensimmäinen ajatuksesi voi olla jotain tällaista:

tausta: #58a;
tausta: lineaarinen gradientti (-45 astetta, läpinäkyvä 15px, #58a 0), lineaarinen gradientti (45 astetta, läpinäkyvä 15px, #655 0);

Tämä ei kuitenkaan toimi. Oletusarvoisesti molemmat liukuvärit vievät koko elementin alueen, joten ne peittävät toisensa. Meidän on tehtävä niistä pienempiä rajoittamalla jokainen niistä puoleen elementistä taustakoon avulla:
tausta: #58a;

taustan koko: 50 % 100 %;

Voit nähdä tuloksen kuvasta.

Vaikka käytimme taustakokoa , liukuvärit menevät silti päällekkäin. Syynä on se, että unohdimme kytkeä taustatoiston pois päältä, joten jokainen tausta toistetaan kahdesti. Näin ollen yksi taustoista peittää edelleen toisen, mutta tällä kertaa toiston kautta. Uusi versio koodi näyttää tältä:
tausta: #58a;
tausta: lineaarinen gradientti(-45°, läpinäkyvä 15px, #58a 0) oikea, lineaarinen gradientti(45°, läpinäkyvä 15px, #655 0) vasen;
taustan koko: 50 % 100 %;

Voit nähdä tuloksen kuvasta ja varmistaa, että se on vihdoin siellä! - toimii! Olet luultavasti jo arvannut, kuinka voit soveltaa tätä tehostetta kaikkiin neljään kulmaan. Tarvitset neljä gradienttia ja seuraavan kaltaisen koodin:

tausta: #58a;
tausta: lineaarinen gradientti (135 astetta, läpinäkyvä 15px, #58a 0) vasemmassa yläkulmassa,

lineaarinen gradientti (-135 astetta, läpinäkyvä 15 kuvapistettä, #655 0) ylhäällä oikea,

lineaarinen gradientti (-45 astetta, läpinäkyvä 15px, #58a 0) alhaalla oikea,

lineaarinen gradientti (45 astetta, läpinäkyvä 15px, #655 0) alhaalla vasen;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;

NEUVOT
Käytimme eri värejä (#58a ja #655) vianmäärityksen helpottamiseksi. Käytännössä molemmat gradientit ovat samanvärisiä.
Mutta ongelma edellisessä koodissa on, että sitä on vaikea ylläpitää. Taustavärin muuttaminen vaatii viisi muokkausta ja kulman arvon muuttaminen neljä. Esiprosessorilla luotu mixin voisi vähentää toistojen määrää. Tältä tämä koodi näyttäisi SCSS:ssä:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
tausta: $bg;
tausta:
lineaarinen gradientti (135 astetta, läpinäkyvä $tl, $bg 0)
ylävasen,
lineaarinen gradientti (225 astetta, läpinäkyvä $tr, $bg 0)
yläoikealla,
lineaarinen gradientti (-45 astetta, läpinäkyvä $br, $bg 0)
alhaalla oikealla,
lineaarinen gradientti (45 astetta, läpinäkyvä $bl, $bg 0)
alhaalla vasen;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;
}

Sitä voidaan sitten kutsua tarvittaessa, kuten alla on esitetty, 2-5 argumentilla:
SCSS
@sisältää viistetyt kulmat (#58a, 15px, 5px);
Tässä esimerkissä päädymme elementtiin, jonka vasenta ylä- ja alakulmaa on leikattu 15 pikselillä ja sen oikeaa yläkulmaa ja vasenta alakulmaa leikattu 5 pikselillä, samalla tavalla kuin reunasäde toimii määritettäessä alle neljä arvoa. Tämä on mahdollista, koska huolehdimme myös SCSS-sekoituksemme argumenttien oletusarvoista - ja kyllä, nämä oletusarvot voivat viitata myös muihin argumentteihin.
KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners-gradients

Kaarevat leikatut kulmat

Erinomainen esimerkki kaarevien leikattujen kulmien käyttämisestä verkkosivustolla. http://g2geogeske.com suunnittelija on tehnyt niistä keskeisen suunnittelun elementin: ne ovat läsnä navigaatiossa, sisällössä ja jopa alatunnisteessa.
Menetelmän muunnelma gradienteilla mahdollistaa kaarevien leikkauskulmien luomisen - efektiä, jota monet kutsuvat "sisäreunan säteeksi", koska se näyttää pyöristetyistä kulmista käänteiseltä versiolta. Ainoa ero on säteittäisten gradienttien käyttö lineaaristen gradienttien sijaan:
tausta: #58a;
tausta: radial-gradient(ympyrä vasemmassa yläkulmassa, läpinäkyvä 15px, #58a 0) ylävasen,

radial-gradient (ympyrä oikeassa yläkulmassa, läpinäkyvä 15px, #58a 0) yläoikealla,

radial-gradient (ympyrä alhaalla oikealla, läpinäkyvä 15px, #58a 0) alhaalla oikea,

radial-gradient(ympyrä alhaalla vasemmalla, läpinäkyvä 15px, #58a 0) alhaalla vasen;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;

Kuten edellisessä tekniikassa, kulman kokoa voidaan ohjata värisiirtymärajojen paikoilla, ja mixin voi tehdä tästä koodista sopivamman jatkohuoltoon.

KOKEILE ITSE!
http://play.csssecrets.io/scoop-corners

Ratkaisu merkkijonolla SVG ja border-image

Vaikka gradienttipohjainen ratkaisu toimii, sillä on muutamia haittoja:
Koodi on erittäin pitkä ja täynnä toistoa. Yleisimmissä tapauksissa, kun meidän on leikattava kaikkia neljää kulmaa samalla määrällä, tämän määrän muuttaminen edellyttää neljä muutosta koodiin.

Vastaavasti taustavärin muuttaminen vaatii neljä muokkausta, ja jos ottaa huomioon vararatkaisun, niin kaikki viisi; Muutosten animointi leikatun kulman kokoon on uskomattoman vaikeaa, ja joissakin selaimissa se on täysin mahdotonta. Onneksi halutusta tuloksesta riippuen voimme käyttää paria muuta menetelmää. Yksi niistä liittyy yhdistymiseen raja-kuva merkkijonolla SVG-koodilla, jossa kulmat luodaan.

Tietäen kuinka se toimii raja-kuva(jos sinun täytyy päivittää tätä tietoa muistissasi, löydät vihjeen), voitko jo kuvitella miltä vaaditun pitäisi näyttää? SVG-koodi?

Koska kokonaismitat eivät ole meille tärkeitä (reunakuva huolehtii skaalauksesta ja SVG-kuvat ovat täydellisesti skaalattuja koosta riippumatta - siunattu vektorigrafiikkaa!), kaikki koot voidaan rinnastaa yhteen, jotta niitä voidaan käyttää kätevämmällä ja lyhyemmällä arvolla. Leikatun kulman arvo on yksi, ja myös suorat sivut ovat yhtä. Tulos (suurennettu helpottamaan katselua). Tätä varten tarvittava koodi näkyy alla:
reunus: 15px läpinäkyvä;


leveys=”3″ height=”3″ fill=”%2358a”>\
\
’);

Huomaa, että viipalointivaiheen koko on 1. Tämä ei tarkoita yhtä pikseliä; todellinen koko määräytyy SVG-tiedoston koordinaattijärjestelmän mukaan (siksi meillä ei ole yksiköitä). Jos käyttäisimme prosenttiosuuksia, meidän pitäisi arvioida 1/3 kuvasta murto-osalla, kuten 33,34 % . On aina riskialtista turvautua likimääräisiin arvoihin, koska eri selaimet Arvot voidaan pyöristää eri tarkkuudella. Ja pitämällä kiinni SVG-tiedoston koordinaattijärjestelmän muutosyksiköistä säästymme päänsärkyltä, joka liittyy kaikkeen pyöristykseen.

Kuten näet, leikatut kulmat ovat läsnä, mutta taustaa ei ole. On kaksi tapaa ratkaista tämä ongelma: joko määrittämällä tausta tai lisäämällä täyttöavainsana border-image-määritykseen, jotta keskiosan elementtiä ei hylätä. Esimerkissämme määritämme mieluummin erillisen taustan, koska tämä määritelmä toimii myös kiertotavana selaimille, jotka eivät tue tätä ratkaisua.

Lisäksi olet todennäköisesti huomannut, että leikatut kulmat ovat nyt pienempiä kuin edellisellä tekniikalla, mikä voi olla hämmentävää. Asetamme kehyksen leveydeksi 15px! Syynä on se, että gradienttiratkaisussa nämä 15 pikseliä mitattiin gradienttiviivaa pitkin, joka on kohtisuorassa gradientin suuntaan nähden. Kehyksen leveyttä ei kuitenkaan mitata diagonaalisesti, vaan vaaka-/pystysuoraan.

Tunnetko minne olen menossa tämän kanssa? Kyllä, kyllä, jälleen kaikkialla läsnä oleva Pythagoraan lause, jota käytimme aktiivisesti. Kuvan kaavion pitäisi selventää asioita.

Lyhyesti sanottuna saman visuaalisen tuloksen saavuttamiseksi tarvitsemme reunuksen leveyden, joka on 2 kertaa gradienttimenetelmässä käyttämämme koko. IN tässä tapauksessa tämä on pikseli, joka on järkevintä arvioida 20 pikseliä, ellemme joudu saamaan diagonaalin kokoa mahdollisimman lähelle arvostettua 15 kuvapistettä:

border-image: 1 url('data:image/svg+xml,\

leveys=”3″ height=”3″ fill=”%2358a”>\

0,2″/>\
’);
tausta: #58a;
Kuten näette, tulos ei kuitenkaan ole aivan sitä mitä odotimme.

Mihin meidän huolella leikatut kulmat katosivat? Älä pelkää, nuori Padawan, kulmat ovat edelleen paikoillaan. Ymmärrät heti, mitä tapahtui, jos asetat erilaisen taustavärin, kuten #655.
Kuten alla oleva kuva osoittaa, syy kulmiemme katoamiseen johtuu taustasta: yllä määrittämämme tausta peittää ne. Ainoa mitä meidän tarvitsee tehdä tämän haitan poistamiseksi, on käyttää taustaleikettä estämään taustaa hiipimästä kehysalueen alle:
reunus: 20px läpinäkyvä;
border-image: 1 url('data:image/svg+xml,\

leveys=”3″ height=”3″ fill=”%2358a”>\

0,2″/>\
’);
tausta: #58a;

Nyt ongelma on ratkaistu ja alamme näyttää täsmälleen samalta kuin ennen. Lisäksi tällä kertaa voimme helposti muuttaa kulmien kokoa yhdellä muokkauksella: yksinkertaisesti säädä kehyksen leveyttä. Voimme jopa animoida tämän tehosteen, koska reunan leveys tukee animaatiota!

Ja taustan muuttaminen vaatii nyt kaksi muokkausta viiden sijasta. Lisäksi, koska taustamme ei riipu kulmiin kohdistetusta tehosteesta, voimme antaa sille gradientin tai minkä tahansa muun kuvion, kunhan reunojen väri on edelleen #58a .

Käytämme esimerkiksi säteittäistä gradienttia hsla(0,0%,100%,.2) -läpinäkyvään. Ratkaisettavana on vain yksi pieni ongelma. Jos reunakuvaa ei tueta, vararatkaisu ei rajoitu leikattujen kulmien puuttumiseen. Koska tausta on rajattu, kentän reunan ja sen sisällön väliin jää vähemmän tilaa. Korjataksemme tämän, meidän on määritettävä sama väri kehykselle, jota käytämme taustalle:
reunus: 20px kiinteä #58a;
border-image: 1 url('data:image/svg+xml,\

leveys=”3″ height=”3″ fill=”%2358a”>\
\
’);
tausta: #58a;
taustaleike: pehmustelaatikko;

Selaimissa, joissa määritelmämme raja-kuva on tuettu, tämä väri ohitetaan, mutta jos reunuskuva epäonnistuu, ylimääräinen reunaväri tarjoaa tyylikkäämmän vararatkaisun. Sen ainoa haittapuoli on, että se lisää tarvittavien muokkausten määrää taustavärin muuttamiseen kolmeen.
KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners

Ratkaisu Rajauspolku

Vaikka rajakuvaratkaisu on erittäin kompakti ja noudattaa hyvin DRY-periaatteita, se asettaa tiettyjä rajoituksia. Esimerkiksi taustamme tulisi silti olla joko kokonaan tai ainakin reunoilta täytetty yhtenäisellä värillä.

Entä jos haluamme käyttää erityyppistä taustaa, kuten tekstuuria, kuviota tai lineaarista gradienttia? On olemassa toinen menetelmä, jolla ei ole tällaisia ​​rajoituksia, vaikka sen käytölle on tietysti tiettyjä rajoituksia.

Muista omaisuus leikepolku salaisuudesta "Kuinka tehdä rombi"? CSS-leikkauspoluilla on hämmästyttävä ominaisuus: niiden avulla voit sekoittaa prosenttiarvoja (tapa, jolla määritämme elementin kokonaismitat) absoluuttisiin arvoihin, mikä tarjoaa uskomattoman joustavuuden. Esimerkiksi koodi syväyspolulle, joka rajaa elementin 20 kuvapisteen suorakulmioon, jossa on viistetyt kulmat (mitattuna vaakasuunnassa), näyttää tältä:
tausta: #58a;
leikepolku: polygon(
20px 0, laskettu (100% - 20px) 0, 100% 20px,
100 % laskettu (100 % - 20 kuvapistettä), laskettu (100 % - 20 kuvapistettä) 100 %
20px 100%, 0 calc(100% - 20px), 0 20px);
Vaikka tämä koodi on lyhyt, se ei noudata DRY-periaatteita, ja tästä tulee yksi suurimmista ongelmista, jos et käytä esiprosessoria. Itse asiassa tämä koodi on paras esimerkki WET-periaatteesta kaikista tässä kirjassa esitellyistä puhtaista CSS-ratkaisuista, koska se vaatii jopa kahdeksan (!) muokkausta kulman koon muuttamiseen.

Toisaalta taustan voi vaihtaa yhdellä muokkauksella, joten ainakin meillä on se. Yksi eduista tätä lähestymistapaa- se, että voimme käyttää täysin mitä tahansa taustaa tai jopa rajata korvaavia elementtejä, kuten kuvia. Kuvassa on leikattujen kulmien avulla tyylitelty kuva. Mikään aiemmista menetelmistä ei voi saavuttaa tätä vaikutusta. Lisäksi clip-path-ominaisuus tukee animaatiota, ja voimme animoida kulman koon muutoksen lisäksi myös siirtymiä eri muotojen välillä.

Sinun tarvitsee vain käyttää erilaista syväyspolkua. Sen lisäksi, että se on monisanainen ja sillä on rajoitettu selaintuki, tämän ratkaisun haittapuoli on se, että jos emme varmista, että täyte on riittävän leveä, myös teksti leikataan pois, koska elementin rajaus ei ota mitään sen komponentteja huomioon. Sitä vastoin gradienttimenetelmä sallii tekstin yksinkertaisesti ulottua leikattujen kulmien ulkopuolelle (ne ovat loppujen lopuksi vain osa taustaa), ja border-image -menetelmä toimii samalla tavalla kuin tavalliset reunukset - se kääri tekstin uudelle linja.

KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners-clipped

TULEVAISUUDEN LEIKKAUKSET
Jatkossa meidän ei tarvitse turvautua CSS-gradienteihin, leikkaamiseen tai SVG:hen saavuttaaksemme leikattujen kulmien vaikutuksen. Uusi omaisuus kulman muotoinen, mukana CSS-taustat ja reunat, taso 4 , säästää meidät tästä päänsärystä. Sitä käytetään eri muotoihin leikattujen kulmien vaikutuksen luomiseen yhdessä rajaus-ominaisuuden kanssa, joka on tarpeen rajausmäärän määrittämiseksi. Esimerkiksi kuvaamaan 15 kuvapisteen leikattuja kulmia kuvan kaikilla puolilla seuraava yksinkertainen koodi riittää:

reunan säde: 15px;
kulman muoto: viisto;

Lue myös

Vlad Merževitš

Huolimatta siitä, että suuret diagonaaliset näytöt ovat tulossa edullisemmiksi ja niiden resoluutio kasvaa jatkuvasti, joskus syntyy tehtävänä sovittaa paljon tekstiä rajoitettuun tilaan. Tämä voi olla tarpeen esimerkiksi mobiiliversio sivustolle tai käyttöliittymälle, jossa rivien määrä on tärkeä. Tällaisissa tapauksissa on järkevää leikata pitkät tekstirivit jättäen vain lauseen alku. Tällä tavalla saamme käyttöliittymän kompaktiin muotoon ja vähennämme näytettävän tiedon määrää. Itse rivin trimmaus voidaan tehdä palvelinpuolella samalla PHP:llä, mutta se on helpompaa CSS:n kautta, ja voit aina näyttää koko tekstin esimerkiksi viemällä hiiren osoitinta sen päälle. Seuraavaksi tarkastellaan menetelmiä tekstin leikkaamiseen kuvitteellisilla saksilla.

Todellisuudessa kaikki johtuu ylivuotoominaisuuden käyttämisestä arvon piilossa . Erot ovat vain tekstimme erilaisessa näytössä.

Ylivuotoa käyttämällä

Jotta ylivuoto-ominaisuus näyttäytyisi tekstin kanssa kaikessa loistossaan, sinun on purettava teksti välilyönnillä arvolla nowrap . Jos näin ei tehdä, tekstiin lisätään väliviivoja ja koko teksti näytetään. Esimerkki 1 näyttää, kuinka pitkää tekstiä leikataan tietyillä tyyliominaisuuksilla.

Esimerkki 1. tekstin ylivuoto

HTML5 CSS3 IE Cr Op Sa Fx

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

Riisi. 1. Tekstin ulkoasu ylivuotoominaisuuden käytön jälkeen

Kuten kuvasta näkyy, siinä on yleensä yksi haittapuoli - ei ole ilmeistä, että tekstillä on jatkoa, joten tämä on saatettava käyttäjän tietoiseksi. Tämä tehdään yleensä gradientin tai ellipsin avulla.

Liukuvärin lisääminen tekstiin

Selventääksesi, että oikealla oleva teksti ei pääty, voit asettaa sen päälle liukuvärin läpinäkyvästä väristä taustaväriin (kuva 2). Tämä luo vaikutelman tekstin asteittaisesta hajoamisesta.

Riisi. 2. Liukuväriteksti

Esimerkki 2 näyttää, kuinka tämä tehoste luodaan. Itse elementin tyyli pysyy käytännössä samana, mutta itse gradientti lisätään pseudoelementillä ::after ja CSS3. Tätä varten lisäämme tyhjän pseudoelementin sisältöominaisuuden läpi ja lisäämme siihen gradientin erilaisilla etuliitteillä tärkeimmille selaimille (esimerkki 2). Liukuvärin leveyttä voidaan helposti muuttaa leveystoiminnolla, voit myös säätää läpinäkyvyyden astetta korvaamalla arvon 0,2 omallasi.

Esimerkki 2: Liukuväri tekstin päälle

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Sisäinen diskreetti arpeggio muuttaa polysarjan, joka on kertaluonteinen pystysuora superpolyfonisessa kankaassa.

Tämä menetelmä ei toimi Internet-selain Explorer versioon 8.0 asti, koska se ei tue liukuvärejä. Voit kuitenkin luopua CSS3:sta ja tehdä gradientin vanhanaikaisesti PNG-24-muodossa olevan kuvan avulla.

Tämä menetelmä voidaan yhdistää vain tavalliseen taustaan, ja taustakuvan tapauksessa tekstin päällä oleva liukuväri on havaittavissa.

Ellipsi tekstin lopussa

Voit myös käyttää ellipsiä rajatun tekstin lopussa liukuvärin sijaan. Lisäksi se lisätään automaattisesti käyttämällä text-overflow -ominaisuutta. Kaikki selaimet ymmärtävät sen, myös IE:n vanhemmat versiot, ja tämän ominaisuuden ainoa haittapuoli on, että sen tila on tällä hetkellä epäselvä. CSS3 näyttää sisältävän tämän ominaisuuden, mutta sen sisältämä koodi ei läpäise vahvistusta.

Esimerkki 3 näyttää tekstin ylivuotoominaisuuden käytön arvoellipsin kanssa, joka lisää ellipsin. Kun siirrät hiiren tekstin päälle, se näkyy kokonaisuudessaan ja korostetaan taustavärillä.

Esimerkki 3: Tekstin ylivuoto

HTML5 CSS3 IE Cr Op Sa Fx

Tiedostamaton aiheuttaa kontrastin, jonka Lee Ross on nimennyt perustavanlaatuiseksi attribuutiovirheeksi, joka voidaan nähdä monissa kokeissa.

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

Riisi. 3. Teksti ellipseillä

Näiden menetelmien suuri etu on, että gradienttia ja ellipsiä ei näytetä, jos teksti on lyhyt ja sopii kokonaan tietylle alueelle. Joten teksti näytetään tavalliseen tapaan, kun se on täysin näkyvissä näytöllä, ja se leikataan pois, kun elementin leveyttä pienennetään.