CSS3:n käyttöönotto tuo vallankumouksellisia muutoksia web-suunnittelijoiden päivittäiseen rutiiniin. CSS3 hämmästyttää meitä edelleen joka päivä. Asiat, jotka aiemmin voitiin tehdä vain javascriptillä, tehdään nyt helposti CSS3:lla. Esimerkiksi Text-Overflow-ominaisuus.
Joskus verkkosivustoja luotaessa meidän on piilotettava osa dynaamisesta tekstistä siirtymättä seuraavalle riville. Eli lisää pitkää tekstiä taulukkoon, jolla on kiinteä leveys. Samalla on tarpeen näyttää käyttäjälle, että tekstin näkyvä osa ei ole kaikki kaikessa. Siellä on myös piilotettu osa. Tämä voidaan näyttää ellipsillä (...).
CSS3:lla voimme tehdä tämän helposti käyttämällä CSS-tekstin ylivuotoominaisuutta
Merkintä
Tekstin ylivuoto: ellipsi;
Merkitys ellipsi voit lisätä ellipsin tekstin jälkeen (...)
Text-overflow: ellipsis -ominaisuus on hyödyllinen, kun:
1. Teksti ulottuu solun ulkopuolelle
2. Solussa on vapaata tilaa: nowrap.
Meillä on 150 pikselin leveä div, joka näyttää yritysten nimet tietokannasta. Mutta samalla emme halua pitkien yritysten nimien hyppäävän uudelle riville ja pilaavan taulukon ulkonäköä. Eli meidän on piilotettava teksti, joka on yli 150 pikseliä. Haluamme myös ilmoittaa tästä käyttäjälle. Joten hän tarkoittaa, että koko otsikkoa ei näytetä. Ja haluamme, että kaikki teksti näkyy, kun hiirtä pidetään.
Katsotaanpa, kuinka voimme tehdä tämän käyttämällä CSS3:a.
Company-wrap ul li (
tekstin ylivuoto: ellipsi;
ylivuoto: piilotettu;
välilyönti: nowrap; )
- Yrityksen nimi
- Investnet Varainhoito
- Russell Investments
- Northwestern Mutual Financial Network
- ING Financial Networks
Selaimen tuki
Selaimien tuen ansiosta tällä ominaisuudella on yksi pieni vivahde. Kaikki paitsi firefox näyttää oikein täydellisesti. Mutta onneksi tähän ongelmaan on ratkaisu!
Kolme pistettä Firefoxissa
Valitettavasti Firefoxin gecko (renderöintimoottori) ei tue tätä ominaisuutta. Tämä selain tukee kuitenkin XBL:ää, jonka avulla selviämme tästä tilanteesta.
Gecko on ilmainen verkkosivun asettelumoottori Mozilla Firefoxille, Netscapelle ja muille selaimille. Vanhat nimet ovat "Raptor" ja "NGLayout". Geckon ydinkonsepti on tukea avoimia verkkostandardeja, kuten HTML, CSS, W3C DOM, XML 1.0 ja JavaScript. Toinen käsite on cross-platform. Nykyään Gecko toimii Linux-, Mac OS X-, FreeBSD- ja Microsoft Windows -käyttöjärjestelmissä sekä Solaris-, HP-UX-, AIX-, Irix-, OS/2-, OpenVMS-, BeOS-, Amiga- ja muissa käyttöjärjestelmissä.
Jos haluat näyttää ellipsin firefoxissa, meidän on lisättävä yksi rivi tyylisivuun.
Jos haluat poistaa ominaisuuden käytöstä, lisää vain:
Moz-sidonta: url("bindings.xml#none");
Seuraava vaihe on luoda bins.xml-tiedosto samaan sijaintiin, johon tyylitaulukko on tallennettu. Voimme käyttää mitä tahansa tekstieditoria tähän! Kopioi alla oleva koodi ja anna tiedostolle nimi kötést.xml.
document.getAnonymousNodes(this)[ 0 ]
this.label.style
this.style.display
if(this.style.display != val) this.style.display= val
this.label.value
if(this.label.value != val) this.label.value= val
var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value= strings.join(" ")
this.display= strings.length ? "" : "ei mitään"
this.update()
this.update()
Lopullinen koodi kaikille selaimille
Company-wrap ul li (
tekstin ylivuoto: ellipsi;
-o-text-overflow: ellipsi;
-moz-binding: url("bindings.xml#ellipsis");
välilyönti: nowrap;
ylivuoto: piilotettu;
}
CSS3:sta on tulossa web-suunnittelijoiden työkalu ympäri maailmaa ennennäkemättömien verkkosivustojen luomiseen minimaalisella koodilla. On olemassa yksinkertaisia, kirjaimellisesti yhden rivin ratkaisuja, jotka olivat aiemmin mahdollisia vain Photoshopilla tai javascriptillä. Aloita CSS3:n ja HTML5:n tehon oppiminen tänään, etkä tule katumaan sitä!
Erottuakseni kääntäjien harmaasta massasta ja voittaakseni myötätuntonne, rakkaat lukijat, oppituntieni lopussa on viisaita ajatuksia ja aforismeja. Näistä riveistä jokainen löytää jotain omaa :)
Kestää arvokkaasti sitä, mitä et voi muuttaa.
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 sivuston mobiiliversiossa tai käyttöliittymässä, 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
Tekstin .size ( välilyönti: nowrap; /* Peruuta tekstin rivitys */ ylivuoto: piilotettu; /* Rajaa sisältöä */ tausta: #fc0; /* Taustaväri */ täyte: 5px; /* Marginaalit */ )
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 tekstiinSelventää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 vaikutuksen, että teksti liukenee vähitellen.
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
Tekstin .koko ( välilyönti: nowrap; /* Peruuta tekstin rivitys */ ylivuoto: piilotettu; /* Rajaa sisältöä */ täyte: 5px; /* Marginaalit */ tausta: #fc0; /* Taustan väri */ sijainti: suhteellinen ; /* Suhteellinen sijainti */ ) .size::after ( sisältö: ""; /* Näytä elementti */ sijainti: absoluuttinen; /* Absoluuttinen sijainti */ oikea: 0; ylhäällä: 0; /* Elementin sijainti */ leveys : 40 px 100% tausta: -webkit-linear-gradient(vasen, rgba(255,204,0, 0,2), #fc0 100%); #fc0 100 %; -ms-linear-gradient(vasen, rgba(255,204,0, 0,2), #fc0 100%); #fc0 100 %)
Sisäinen diskreetti arpeggio muuttaa polysarjan, joka on kertaluonteinen pystysuora superpolyfonisessa kankaassa.
Tämä menetelmä ei toimi Internet Explorerissa 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 lopussaVoit 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. Sen ymmärtävät kaikki selaimet, 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
Tekstin .koko ( välilyönti: nowrap; /* Peruuta tekstin rivitys */ ylivuoto: piilotettu; /* Rajaa sisältöä */ täyttö: 5px; /* Marginaalit */ text-overflow: ellipsi; /* Ellipsis */ ) .size :hover ( tausta: #f0f0f0; /* Taustaväri */ välilyönti: normaali; /* Normaali tekstin rivitys */ ) Tajuton aiheuttaa kontrastia, Lee Ross tunnistaa tämän perustavanlaatuiseksi attribuutiovirheeksi, joka näkyy monia kokeita.
Tämän esimerkin tulos on esitetty kuvassa. 3.
Riisi. 3. Teksti ellipsillä
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.
Monet ihmiset ovat todennäköisesti kohdanneet ongelman, kun tekstiä on näytettävä yhdellä rivillä. Lisäksi teksti voi olla melko pitkä, ja sen lohkon leveys, jossa tämä teksti sijaitsee, on yleensä rajoitettu vähintään selainikkunan kokoon. Näitä tapauksia varten keksittiin tekstin ylivuotoominaisuus, joka sisältyi CSS3-suositukseen ja otettiin ensimmäisen kerran käyttöön IE6:ssa, hyvin kauan sitten. Käytettäessä tätä ominaisuutta lohkolle, jos sen teksti on leveämpi kuin itse lohko, teksti leikataan pois ja loppuun sijoitetaan ellipsi. Vaikka kaikki ei olekaan niin yksinkertaista täällä, palaamme tähän hieman myöhemmin.
Internet Explorerilla kaikki on selvää, entä muut selaimet Ja vaikka teksti-ylivuodon ominaisuus on tällä hetkellä pois CSS3-spesifikaatiosta, Safari tukee sitä (ainakin versiossa 3), myös Opera (versiosta 9 lähtien, vaikka ominaisuus on? nimeltä -o-overflow-text) Mutta Firefox ei tue sitä, eikä edes versiossa 3 se on surullista, mutta totta.
Tietysti se voidaan tehdä. Kun etsin Internetistä tätä omaisuutta ja kuinka se tehdään Firefoxissa, törmäsin yksinkertaiseen ratkaisuun. Ratkaisun ydin:
Siinä kaikki. Lue artikkelista lisätietoja.
Ratkaisu ei ole huono, mutta ongelmia on:
Keskitytään ensin toiseen ongelmaan, nimittäin siihen, kuinka vältetään ellipsin näyttäminen, kun sitä ei tarvita. Aivoni raahaamisen ja "vähän" kokeilun jälkeen löysin ratkaisun. Yritän selittää.
Asia on siinä, että tarvitsemme erillisen lohkon ellipsillä, joka tulee näkyviin vain, kun teksti vie liian paljon tilaa leveydeltä. Sitten keksin idean putoavasta kelluvasta kappaleesta. Vaikka se kuulostaa pelottavalta, se tarkoittaa vain lohkoa, joka on aina paikalla ja painettuna oikealle, mutta kun tekstin leveys kasvaa suureksi, teksti työntää lohkon seuraavalle riville.
Jatketaan harjoittelua, muuten sitä on vaikea selittää. Asetetaan HTML-rakenne:
Ei kovin kompakti, mutta en voinut tehdä mitään pienempää. Joten meillä on lohkosäiliö DIV.ellipsis, lohko, jossa on tekstimme, ja toinen lohko, joka sisältää ellipsin. Huomaa, että "ellipsilohko" on itse asiassa tyhjä, koska emme tarvitse kolmea ylimääräistä pistettä, kun kopioimme tekstiä. Älä myöskään huolestu lisäluokkien puutteesta, koska tämä rakenne on hyvin hoidettu käyttämällä CSS-valitsimia. Ja tässä itse CSS:
.ellipsis ( ylivuoto: piilotettu; välilyönti: ei rivitystä; rivin korkeus: 1,2 em; korkeus: 1,2 em; reunus: 1px tasainen punainen; ) . ellipsis > DIV:first-child ( kellua: vasen; ) .ellipsis > DIV + DIV ( kellua: oikea; marginaali-yläosa: -1.2em; ).ellipsis >
Siinä kaikki. Tarkistamme ja varmistamme, että se toimii tarkoitetulla tavalla Firefoxissa, Operassa, Safarissa. IE:ssä on hyvin outo, mutta ennustettavissa oleva tulos. IE6:ssa kaikki on poissa, mutta IE7:ssä se ei yksinkertaisesti toimi, koska se ei tue luotua sisältöä. Mutta palataan IE:hen myöhemmin.
Katsotaan nyt, mitä olemme tehneet. Ensin asetetaan päälohkon rivin korkeus ja korkeus, koska meidän on tiedettävä lohkon korkeus ja tekstirivin korkeus. Asetamme saman arvon lohkon marginaalille ellipsillä, mutta negatiivisella arvolla. Siten, kun lohkoa ei ole "palautettu" seuraavalle riville, se on tekstirivin yläpuolella (yksi rivi), kun se nollataan, se on tasollaan (itse asiassa se on alempi, vedämme sitä vain yksi rivi ylöspäin). Tarpeettomien asioiden piilottamiseksi, varsinkin kun ellipsiä ei tarvitse näyttää, teemme ylivuodon: piilotettu päälohkolle, joten kun ellipsi on viivan yläpuolella, sitä ei näytetä. Näin voimme myös poistaa tekstin, joka jää lohkon ulkopuolelle (oikealle reunalle). Estäksemme tekstiä odottamatta kietoutumasta ja työntämästä lohkoa, jossa ellipsillä on yhä alempi, teemme välilyönnin: ei rivitystä, mikä estää yhdysviivat - tekstimme on aina yhdellä rivillä. Tekstiä sisältävälle lohkolle asetamme float: left, jotta se ei välittömästi kokoa lohkoa ellipsin kanssa ja vie minimileveyden. Koska päälohkon sisällä (DIV.ellipsis) molemmat lohkot kelluvat (float: vasen/oikea), päälohko kutistuu kun tekstilohko on tyhjä, joten päälohkolle asetetaan kiinteä korkeus (korkeus: 1,2em) . Ja lopuksi käytämme ::after pseudo-elementtiä ellipsin näyttämiseen. Tälle pseudoelementille asetimme myös taustan peittämään sen alla näkyvän tekstin. Asetimme päälohkolle kehyksen vain nähdäksemme lohkon mitat myöhemmin poistamme sen.
Jos Firefox tukisi pseudoelementtejä sekä Operaa ja Safaria niiden sijoittelussa (niiden asettaminen/kelluke jne.), niin erillistä lohkoa ellipsille ei voisi käyttää. Yritä korvata kolme viimeistä sääntöä seuraavilla:
Operassa ja Safarissa kaikki toimii kuten ennenkin ja ilman ylimääräistä ellipsilohkoa. Mutta Firefox on pettymys. Mutta hänen puolestaan me teemme päätöksen. No, sinun täytyy tyytyä alkuperäiseen HTML-rakenteeseen
Kuten olet ehkä huomannut, pääsimme eroon ellipsien ongelmasta, kun teksti mahtuu lohkoon. Meillä on kuitenkin vielä yksi ongelma - teksti on leikattu pois kirjainten keskeltä. Ja sitä paitsi se ei toimi IE:ssä. Kummankin voittamiseksi sinun on käytettävä natiivitekstin ylivuotosääntöä selaimissa ja vain Firefoxissa yllä kuvattua ratkaisua (vaihtoehtoa ei ole). Selvitämme myöhemmin, kuinka tehdä ratkaisu "vain Firefoxille", mutta nyt yritetään saada se, mitä meillä on, toimimaan tekstin ylivuodon avulla. Muokataan CSS:ää:
Kuten kävi ilmi, ei ole paljon muokattavaa. Päälohkotyyliin on lisätty kolme riviä. Kaksi niistä sisältää tekstin ylivuotoa. Leveyden asettaminen 100 %:iin on tarpeen IE:lle, jotta teksti ei laajenna lohkoa äärettömään ja tekstin ylivuoto-ominaisuus toimii; pohjimmiltaan rajoitimme leveyttä. Teoriassa DIV, kuten kaikki lohkoelementit, ulottuu koko säiliön leveydelle ja leveys: 100% on hyödytöntä ja jopa haitallista, mutta IE:llä on ongelma asettelussa, koska säiliö venyy aina sisältöön sopivaksi, joten ei ole muuta tapaa. Teimme myös kaikki sisäiset elementit upotettuina, koska joissain selaimissa (Safari & Opera) tekstin ylivuoto ei muuten toimi, koska sisällä on lohkoelementtejä. Kommentoimme kolme viimeistä sääntöä, koska tässä tapauksessa niitä ei tarvita ja ne rikkovat kaiken (ristiriita). Näitä sääntöjä tarvitaan vain Firefoxille.
Katsotaan mitä saamme ja jatketaan.
Vaihe kolme
Kun katsoin vielä kerran heti alussa mainittua sivua (ennen kuin aioin kirjoittaa tämän artikkelin), niin uteliaisuudesta selailin kommenteista älykkäitä aiheeseen liittyviä ideoita. Ja löysin sen kommentista, joka puhui toisesta ratkaisusta, joka toimii Firefoxissa ja IE:ssä (tälle henkilölle, kuten ensimmäisen artikkelin kirjoittajalle, ei ilmeisesti ole muita selaimia). Joten tässä ratkaisussa kirjoittaja käsittelee tätä ilmiötä (tekstin ylivuodon puuttuminen) hieman eri tavalla kiinnittämällä käsittelijöitä ylivuoto- ja alivuototapahtumiin elementteihin, joille oli tarpeen laittaa ellipsi. Ei paha, mutta minusta näyttää siltä, että tämä ratkaisu on erittäin kallis (resurssien suhteen), varsinkin kun se on hieman häiritsevä. Kuitenkin, kun hän selvitti, kuinka hän saavutti tämän, hän törmäsi mielenkiintoiseen asiaan, nimittäin CSS-ominaisuuteen -moz-binding. Ymmärtääkseni tämä on analoginen käyttäytyminen IE:ssä, vain eri kastikkeella ja jäähdyttimellä. Mutta emme mene yksityiskohtiin, sanotaan vain, että tällä tavalla voit liittää JavaScript-käsittelijän elementtiin CSS:n avulla. Se kuulostaa oudolta, mutta se toimii. Mitä teemme:
Kuten näette, emme taaskaan tehneet paljon muutoksia. Tässä vaiheessa IE7:ssä on outo häiriö, kaikki on vinossa, jos et aseta zoomia: 1 päälohkolle (yksinkertaisin vaihtoehto). Jos poistat (poistat, kommentoit) säännön .ellipsis * tai .moz-ellipsis > DIV + DIV (joka ei vaikuta IE7:ään ollenkaan), häiriö katoaa. Tämä kaikki on outoa, jos joku tietää mikä on vialla, kertokoon minulle. Toistaiseksi ryhdymme zoomaukseen: 1 ja siirrymme Firefoxiin.
Ominaisuus -moz-binding sisältää moz_fix.xml-tiedoston, jossa on käsky, jonka tunniste-ellipsi. Tämän xml-tiedoston sisältö on seuraava:
Tämä konstruktori vain lisää moz-ellipsis-luokan elementtiin, jota varten valitsin toimi. Tämä toimii vain Firefoxissa (gecko-selaimet?), joten vain siinä elementteihin lisätään luokka moz-ellipsis, ja voimme lisätä tälle luokalle lisäsääntöjä. Sitä he halusivat. En ole täysin varma tämän.style.mozBinding = "" tarpeesta, mutta ilmaisukokemuksen perusteella on parempi olla varmuudella (yleensä en ole kovin perehtynyt Firefoxin tähän puoleen, joten voin erehtyä).
Saatat olla huolissasi siitä, että tämä tekniikka käyttää ulkoista tiedostoa ja JavaScriptiä yleensä. Ei ole syytä pelätä. Ensinnäkin, jos tiedosto ei lataudu ja/tai JavaScript on poistettu käytöstä eikä toimi, se on okei, käyttäjä ei yksinkertaisesti näe ellipsiä lopussa, teksti leikataan pois lohkon lopusta. Eli tässä tapauksessa saamme "häiritsemättömän" ratkaisun. Voit nähdä itse.
Näin ollen saimme "Big Four" -selaimille tyylin, joka toteuttaa tekstin ylivuodon Operalle, Safarille ja IE:lle ja emuloi sitä Firefoxille, ei kovin hyvin, mutta se on parempi kuin ei mitään
Voisimme lopettaa tämän asian, mutta haluaisimme parantaa ratkaisuamme hieman. Koska voimme liittää konstruktorin mihin tahansa lohkoon ja siten saada sen hallintaan, miksi et hyödyntäisi tätä. Yksinkertaistetaan rakennetta:
Voi kyllä! Uskon, että olet kanssani samaa mieltä - tätä tarvitset!
Poistetaan nyt kaikki tarpeettomat asiat tyylistä:
.ellipsis ( ylivuoto: piilotettu; välilyönti: ei rivitys; rivin korkeus: 1,2 em; korkeus: 1,2 em; tekstin ylivuoto: ellipsi; -o-tekstin ylivuoto: ellipsi; leveys: 100%; -moz-sidonta: url(moz_fix.xml#ellipsis); .moz-ellipsis > DIV:first-child ( float: left; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .moz - ellipsi > DIV + DIV::after ( taustaväri: valkoinen; sisältö: "..."; )
Saimme vihdoin punaisen reunuksen pois :)
Lisätään nyt hieman moz_fix.xml-tiedostoomme:
Mitä täällä tapahtuu? Olemme luomassa uudelleen alkuperäistä HTML-rakennettamme. Toisin sanoen nämä lohkojen vaikeudet tehdään automaattisesti ja vain Firefoxissa. JavaScript-koodi on kirjoitettu parhaiden perinteiden mukaan :)
Valitettavasti emme voi välttää tilannetta, jossa teksti katkeaa kirjeen keskeltä (tosin, ehkä väliaikaisesti, koska ratkaisuni on vielä erittäin karkea, ja se saattaa toimia tulevaisuudessa). Mutta voimme tasoittaa tätä vaikutusta hieman. Tätä varten tarvitsemme kuvan (valkoinen tausta läpinäkyvällä gradientilla) ja muutamia muutoksia tyyliin:
.moz-ellipsis > DIV:first-child ( float: left; margin-right: -26px; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; background: url(ellipsis. png) toista-y, täyte-vasen: 26px)
Katsotaan ja nautitaan elämästä.
Lopetetaan tämä johtopäätös
Annan pienen esimerkin kolmannen osapuolen asettelusta. Otin yhden Wikipedia-sivun (ensimmäisen esiin tulleen) sisällysluettelon ja sovelsin siihen yllä kuvattua menetelmää.
Yleensä tätä ratkaisua voidaan kutsua universaaliksi vain venytyksellä. Kaikki riippuu asettelustasi ja sen monimutkaisuudesta. Saatat tarvita tiedoston tai ehkä tamburiinin. Vaikka useimmissa tapauksissa uskon sen toimivan. Ja sitten sinulla on nyt lähtökohta ;)
Toivottavasti opit artikkelista jotain mielenkiintoista ja hyödyllistä;) Opi, kokeile, jaa.
Onnea!
Kuinka ärsyttäviä joskus ovat tuotelinkkien pitkät nimet - kolme riviä kussakin - tai muiden lohkojen pitkät otsikot. Kuinka hienoa olisikaan, jos tätä kokonaisuutta voitaisiin jotenkin kaventaa, tiivistää. Ja kun viet hiiren sen päälle, näytä otsikko kokonaan.
Tätä varten suosikki-CSS-palvelumme tulee avuksemme. Se on hyvin yksinkertaista, katso.
Oletetaan, että meillä on tällainen lohko tuoteluettelosta:
Tässä sen rakenne:
Miracle Yudo iltavoimanantaja, salaperäinen, taide. 20255-59
Upea tuote superhintaan, vain 100 ruplaa. Se piristää yksinäisiä iltojasi ja antaa sinulle elinvoimaa!
Tässä hänen tyylinsä:
Someblock(reunus: 1px kiinteä #cccccc; marginaali: 15px automaattinen; täyte: 10px; leveys: 250px; ) .header(reunus-ala: 1px katkoviiva; fontin koko: 16px; fontin paino: lihavoitu; marginaali-ala: 12px ;)
Samaa mieltä, se näyttää kamalalta. Voit tietysti lyhentää tuotteen nimeä. Mutta entä jos niitä on satoja tai tuhansia? Voit myös käyttää PHP:tä osan nimen leikkaamiseen ja rajoittaa sen tiettyyn merkkimäärään. Mutta entä jos asettelu muuttuu myöhemmin ja lohkot ovat pienempiä tai päinvastoin 2-3 kertaa suurempia? Mikään näistä ei ole vaihtoehto, mikään näistä ei sovi meille.
Ja tässä CSS ja sen maaginen text overflow -ominaisuus tulee avuksemme. Mutta sitä on käytettävä oikein yhdessä useiden muiden ominaisuuksien kanssa. Alla näytän sinulle valmiin ratkaisun, jonka jälkeen selitän mikä on mitä.
Jättäen siis sivuun tuotteiden nimien manuaalisen muokkaamisen ja ohjelmoidun tyylien rajaamisen, otamme CSS:n käsiimme ja katsomme, mitä saamme:
Miracle Yudo iltavoimanantaja, salaperäinen, taide. 20255-59
Upea tuote superhintaan, vain 100 ruplaa. Se piristää yksinäisiä iltojasi ja antaa sinulle elinvoimaa!
No onko parempi? Omasta mielestäni erittäin paljon! Ja siirrä hiiren osoitin otsikon päälle... voila! Tässä se näytetään meille kokonaisuudessaan.
Mikään ei ole muuttunut rakenteessamme, lisäsin vain div:n, jossa on .header-luokka ja otsikkotunniste. Ja tässä uudet, päivitetyt tyylit:
Someblock(reunus: 1px kiinteä #cccccc; marginaali: 15px automaattinen; täyte: 10px; leveys: 250px; ) .header(reunus-ala: 1px katkoviiva; fontin koko: 16px; fontin paino: lihavoitu; marginaali-ala: 12px ylivuoto: piilotettu ylivuoto: välilyönti;
Katso mitä teimme:
- Lisäsimme lohkoon välilyönnin: nowrap-ominaisuuden, joka poistaa tekstiltä mahdollisuuden rivittää sanoja uudelle riville ja venyttää sitä siten riviksi;
- Sitten lisäsimme ylivuodon: piilotettu ominaisuus, joka rajoitti linjamme näkyvyyden lohkon leveyteen, mikä leikkasi pois kaiken ylimääräisen eikä näyttänyt sitä vierailijalle;
- No, lopussa lisäsimme rivillemme ellipsin käyttämällä text-overflow: ellipsis -ominaisuutta, jolloin kävijälle kerrottiin, että tämä ei ole rivin loppu ja että hänen on luultavasti liikutettava hiirtä ja katsottava sitä koko.
Rakasta CSS:ää, opettele CSS, ja verkkosivustojen rakentaminen ei näytä sinulle niin vaikealta =)
