Van egy tetszőleges hosszúságú szöveg, amelyet egy rögzített magasságú és szélességű blokkon belül kell megjeleníteni. Ebben az esetben, ha a szöveg nem fér el teljesen, akkor egy olyan szövegrészletet kell megjeleníteni, amely teljesen beleillik a megadott blokkba, ami után az ellipszis beáll.
Egy ilyen feladat meglehetősen gyakori, ugyanakkor nem olyan triviális, mint amilyennek látszik.
Ebben az esetben használhatja a text-overflow: ellipsis tulajdonságot. Ebben az esetben a konténernek rendelkeznie kell a tulajdonsággal túlcsordulás egyenlő rejtett vagy csipesz
Blokk ( szélesség : 250 képpont ; szóköz : nincs tördelve ; túlcsordulás : rejtett ; szöveg túlcsordulás : ellipszis ; )
A többsoros szöveg levágásának első módja CSS tulajdonságok pszeudoelemeket alkalmazni :előttÉs :után. Kezdjük a HTML-jelöléssel
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril feiitsenit te augucili feissinit.
És most maguk az ingatlanok
Box ( túlcsordulás : rejtett ; magasság : 200 képpont ; szélesség : 300 képpont ; vonalmagasság : 25 képpont ; ) .box :before ( tartalom : "" ; float : left ; szélesség : 5 képpont ; magasság : 200 képpont ; ) .first > -child ( lebegés : jobb ; szélesség : 100% ; margó - bal : -5px ; ) .box :after ( tartalom : "\02026" ; dobozméret : tartalomdoboz ; lebegés : jobb ; pozíció : relatív ; felül : -25px; bal: 100%; szélesség: 3em; margó balra: -3em; kitöltés jobbra: 5px; szövegigazítás: jobbra; háttérméret: 100% 100%; háttér: lineáris színátmenet (jobbra, rgba (255 , 255 , 255 , 0 ), fehér 50% , fehér );)
Egy másik módszer az oszlopszélesség tulajdonság használata, amely beállítja a többsoros szöveg oszlopszélességét. Igaz, ennek a módszernek a használatakor nem fog működni, ha ellipszist telepítünk a végére. HTML:
Blokk ( túlcsordulás : rejtett ; magasság : 200 képpont ; szélesség : 300 képpont ; )
A többsoros szöveg CSS-ben való megoldásának harmadik módja a böngészők számára Webkit. Ebben az előtaggal egyszerre több konkrét tulajdonságot kell használnunk -webkit. A fő a -webkit-line-clamp, amely lehetővé teszi a blokkban megjelenítendő sorok számának megadását. A megoldás gyönyörű, de meglehetősen korlátozott, mivel a böngészők korlátozott csoportjában működik
Blokk ( túlcsordulás : rejtett ; szöveg túlcsordulás : ellipszis ; megjelenítés : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : függőleges; )
Itt egy további láthatatlan blokkot használunk, amelybe kezdetben a szövegünk kerül, majd egyenként törlődik, amíg a blokk magassága kisebb vagy egyenlő lesz, mint a magasság kívánt blokk. És a végén a szöveg átkerül az eredeti blokkba.
var blokk = dokumentum. querySelector(.block" ), szöveg = blokk . innerHTML , klón = dokumentum . createElement("div"); klón. stílus. pozíció = "abszolút" ; klón. stílus. láthatóság = "rejtett" ; klón. stílus. szélesség = blokk . clientWidth + "px" ; klón. innerHTML = szöveg ; dokumentum. test . appendChild(klón); var l = szöveg . hossza - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( klón . innerHTML = text . substring (0 , l ) + "..." ; ) blokk . innerHTML = klón . innerHTML ;
Ez a jQuery beépülő modulja formájában:
(függvény ($) ( var truncate = függvény (el ) ( var text = el . text (), magasság = el . magasság (), klón = el . klón (); klón . css (( pozíció : "abszolút" , láthatóság : "rejtett" , magasság : "auto" )); el .after (klón ); var l = szöveg . hossz - 1 ; for (; l >= 0 && klón . magasság () > magasság ; -- l ) ( klón . szöveg (szöveg . részkarakterlánc (0 , l ) + "..." ); ) el. szöveg (klón . szöveg ()); klón . eltávolítás (); ); $ . fn . truncateText = függvény () ( return this . every (függvény () ( csonka ($ (this )); )); ); )(jQuery ));
Mindig azt akarjuk, hogy az oldalon minden rendben legyen, de például vannak olyan szöveges blokkok, amelyeket bizonyos határokon belül be kell írni, ez lehet egy cikk bejelentése vagy egy termék leírása. A szöveg tetszőleges hosszúságú. Természetesen folyamatosan lehet a mező méretéhez igazítani a szöveget, hogy ne menjen el semmi, de meg lehet csinálni úgy, hogy a plusz szöveg el van rejtve.
Erre van egy egyszerű CSS-megoldás. Ingatlanhasználat szöveg-túlcsordulás: ellipszis , amely lehetővé teszi egy karakterlánc megvágását egy hosszú teszttel. Azért, hogy ezt a döntést dolgozott, meg kell adnia a szülőblokk szélességét, és rendelkeznie kell a tulajdonsággal túlcsordulás egyenlő rejtett vagy csipesz .
Box-text ( szöveg-túlcsordulás: ellipszis; //hosszú dobozok képe szövegtúlcsordulással: rejtett; //túlcsordult szöveg elrejtése szélesség: 100%; //a szövegdoboz szélessége szóközzel: nowrap; //törlés tiltása szöveg)
Minden felszerelésük és eszközük életben volt, ilyen vagy olyan formában.
De a többsoros szöveg kivágásához a CSS-ben pszeudoelemekhez kell folyamodnia :előtt És :után .
Box-text ( túlcsordulás: rejtett; magasság: 200 képpont; vonalmagasság: 25 képpont; ) .box-text:before ( tartalom: ""; lebegés: balra; szélesség: 5 képpont; magasság: 200 képpont; ) .box-text > * :first-child ( lebegés: jobbra; szélesség: 100%; margó-bal: -5px; ) .box-text:after ( tartalom: "\02026"; box-sizing: content-box; float: jobbra; pozíció: relatív; felső: -25px; bal: 100%; szélesség: 3em; margó balra: -3em; kitöltés jobbra: 5px; szöveg igazítása: jobbra; háttér mérete: 100% 100%; háttér: lineáris színátmenet ( jobbra, rgba(255, 255, 255, 0), fehér 50%, fehér); )
Az erdő bal oldala sötét volt, árnyékban; a jobb oldali, nedves, fényes, ragyogott a napon, enyhén imbolygott a szélben. Minden virágzott; a csalogányok csicseregtek és gurultak most közel, most már messze.
Üdvözlök mindenkit, a nevem Anna Blok, és ma arról fogunk beszélni, hogyan lehet képeket vágni grafikus programok használata nélkül.
Mindenekelőtt azokon a webhelyeken, ahol a képeket tartalmazó tartalom valószínűleg nem lesz levágva, hogy illeszkedjen egy adott blokkhoz.
Feltűnő példa: blog a WordPress-en.
Tegyük fel, hogy azt szeretné, ha a cikk borítójának oldalaránya 1:1 (négyzet). Az Ön cselekedetei:
Amikor felkeresi az oldalt, azt az eredményt fogja látni, amit várt.
De tegyük fel, hogy elfelejtette kivágni a képet a Photoshopban, és egy véletlenszerű képet töltött fel borítóként az internetről, akkor mi lesz? Így van, az elrendezés törni fog. És ha egyáltalán nem használt CSS-t, akkor egy HD felbontású kép teljesen blokkolhatja a szöveg teljes nézetét. Ezért fontos, hogy a képeket CSS-stílusokkal le tudjunk vágni.
Nézzünk meg különböző helyzeteket, hogyan valósítható meg ez nemcsak CSS-sel, hanem SVG-vel is.
Próbáljunk meg levágni egy képet, amely a background-image használatával van elhelyezve. Készítsünk néhány HTML jelölést
Térjünk át a CSS stílusra. Képet adunk hozzá a háttérképen keresztül, megadjuk a képünk kereteit, középre állítjuk a képet a background-position segítségével, és beállítjuk a háttér méretét:
jpg); background-position:center-center; background-size:cover; szélesség: 300 képpont; magasság: 300 képpont; )
Ez volt az első és legegyszerűbb módszer a kép kivágására. Most nézzük a második példát.
Tegyük fel, hogy ugyanaz a doboztárolónk van, amelyben egy img címke található egy képpel, amelyet most stílusozunk.
A képünket a létrehozandó objektumhoz képest középre is helyezzük. És egy meglehetősen ritkán használt tulajdonságot használunk: object-fit .
Box ( pozíció: relatív; túlcsordulás: rejtett; szélesség: 300 képpont; magasság: 300 képpont; ) .box img ( pozíció: abszolút; felső: 50%; bal: 50%; transzformáció: fordítás (-50%, -50%); szélesség: 300 képpont; magasság: 300 képpont; objektum-illesztés: borító; )
Véleményem szerint ez a legjobb módszer. Ideális blogokhoz, ha teljesen eltérő arányú bejegyzésekhez használsz képeket.
További információ a HTML-ről és a CSS-ről itt:
A képekhez pillanatnyilag kivágást is készíthetünk, ha beillesztjük őket SVG elemekbe. Vegyünk példának egy kört. SVG-t címkék segítségével készíthetünk. Hozzon létre egy burkoló svg címkét, amelyen belül egy körcímke és egy mintacímke lesz. A mintacímkébe írjuk a képcímkét. Ebben megadjuk az xlink:href attribútumot, és hozzáadunk egy képet. Hozzáadjuk a szélesség és magasság attribútumokat is. De ez még nem minden. Hozzá kell adnunk egy kitöltési értéket. Munkánk teljessé tétele érdekében a képcímkéhez egy segédmegőrzési attribútumot adunk, amely lehetővé teszi, hogy a képünket a kör körül „tól-ig” töltsük ki.
Ezt a módszert nem nevezhetem általánosnak. De kivételes esetekben használható. Például, ha egy blog témáját érintettük, akkor ideális esetben a cikket író szerző avatarjába illene egy ilyen módszer.
További információ a HTML-ről és a CSS-ről itt:
Eredmények:
Három módszert ismertettünk a képek kivágására a webhelyeken: a background-image használatával, az img címke használatával és a mintával kapcsolatos svg-vel bittérképek beágyazásával a képcímkével. Ha ismer más módszereket a kép SVG használatával történő kivágására, ossza meg őket a megjegyzésekben. Nem csak nekem, de másoknak is hasznos lesz megismerni őket.
Ne felejtse el feltenni kérdéseit az elrendezéssel vagy a front-end fejlesztéssel kapcsolatban a FrontendHelp online szakembereinek.
Egyes esetekben a blokk tartalma az elem határain kívül, átfedésben jelenik meg. A viselkedés irányítására blokk elemek a túlcsordulás tulajdonságot használják, amely meghatározza, hogy a blokkon túlmutató tartalmat hogyan kell megjeleníteni.
A klip tulajdonság segítségével egy elemet adott méretre vághat.
A blokkelemek tartalma túlcsordulhat a blokkon, ha a blokknak kifejezett magassága és/vagy szélessége van. Magasság nélkül a blokk megnyúlik, hogy illeszkedjen a tartalomhoz, kivéve, ha a blokk a következő pozícióba van állítva: abszolút; vagy pozíció: rögzített; . A szöveg túlcsordulhat a blokkon magasságban, a képek túlcsordulhatnak magasságban és szélességben.
| Értékek: | |
| látható | Alapértelmezett érték. Minden tartalom láthatóvá válik, függetlenül a tárolóblokk méretétől. Lehetőség van a szomszédos blokkok tartalmának átfedésére. |
| tekercs | Görgetősávokat ad az elem megjelenítési területéhez, amelyek akkor is megjelennek, ha a tartalom elfér egy blokkon belül. A tartály méretei nem változnak. |
| auto | Csak szükség esetén ad hozzá görgetősávokat. |
| rejtett | Elrejti a blokkhatárokon túlmutató tartalmat. Elrejthet néhány tartalmat. Lebegő elemeket tartalmazó konténerblokkhoz használatos. Ezenkívül megakadályozza a hátterek vagy szegélyek megjelenítését a lebegtetett elemek alatt (amelyek lebegésre vannak beállítva: balra/jobbra; . Ez nem méretezi át a tárolót. |
Rizs. 1. Vágóblokk tartalom túlcsordulás tulajdonsággal Szintaxis: div ( szélesség: 200 képpont; magasság: 150 képpont; túlcsordulás: rejtett; ) A tulajdonság megadja, hogy a blokkon belüli tartalom jobb széle hogyan lesz levágva, ha túlcsordul.
Szintaxis:
Div ( túlcsordulás-x: rejtett; )
A tulajdonság megadja, hogy a blokkon belüli tartalom alsó széle hogyan lesz levágva, ha túlcsordul.
Szintaxis:
Div ( túlcsordulás-y: rejtett; )
A tulajdonság határozza meg, hogy az elem melyik része lesz látható. Az elemnek azt a részét, amely a kivágás után is látható marad, vágási régiónak nevezzük. A vágást egy olyan elemre alkalmazzák, amely kezdetben teljesen látható. A tulajdonság azokra az elemekre vonatkozik, amelyek pozíciótulajdonsága abszolút vagy rögzített.
Vlad Merzsevics
Annak ellenére, hogy a nagy átlós monitorok egyre olcsóbbak, felbontásuk pedig folyamatosan növekszik, időnként felmerül a feladat, hogy szűk helyen sok szöveget elférjenek. Erre például szükség lehet mobil verzió oldalon vagy olyan felületen, ahol a sorok száma fontos. BAN BEN hasonló esetek célszerű a hosszú szövegsorokat levágni, csak a mondat elejét hagyva meg. Így az interfészt kompakt formába hozzuk, és csökkentjük a kimeneti információ mennyiségét. Magát a sorvágást a szerver oldalon is meg lehet csinálni ugyanazzal a PHP-vel, de CSS-en keresztül ez egyszerűbb, és mindig megjelenítheti a teljes szöveget, például ha fölé viszi az egérkurzort. Ezután fontolja meg a szöveg képzeletbeli ollóval történő kivágásának módszereit.
Valójában a overflow tulajdonság használata rejtett értékkel. A különbségek csak a szövegünk eltérő megjelenítésében rejlenek.
Ahhoz, hogy a túlcsordulás tulajdonság teljes pompájában jelenjen meg a szöveggel, meg kell szakítanunk a szöveg tördelését nowrap értékkel. Ha ez nem történik meg, akkor nem lesz szükségünk effektusra, kötőjelek kerülnek a szövegbe, és teljes egészében megjelenik. Az 1. példa bemutatja, hogyan vághat le hosszú szöveget meghatározott stílustulajdonságokkal.
Példa 1. túlcsordulás szöveghez
HTML5 CSS3 IE Cr Op Sa Fx
Eredmény ezt a példátábrán látható. 1.
Rizs. 1. A szöveg megjelenése a túlcsordulás tulajdonság alkalmazása után
Amint az ábrán látható, általánosságban egyetlen hátránya van - nem nyilvánvaló, hogy a szövegnek van folytatása, ezért ezt a felhasználót fel kell hívni. Ehhez általában gradienst vagy ellipszist használnak.
Annak érdekében, hogy a jobb oldali szöveg ne érjen véget, átlátszótól háttérszínig színátmenetet alkalmazhat a tetejére (2. ábra). Ez a szöveg fokozatos feloldódásának hatását hozza létre.
Rizs. 2. Színátmenetes szöveg
A 2. példa bemutatja, hogyan hozható létre ez a hatás. Maga az elem stílusa gyakorlatilag változatlan marad, de maga a színátmenet az ::after pszeudoelem és a CSS3 segítségével kerül hozzáadásra. Ehhez a tartalom tulajdonságon keresztül beszúrunk egy üres pszeudoelemet, és a fő böngészőkhöz különböző előtagokkal színátmenetet alkalmazunk (2. példa). A gradiens szélessége a szélességen keresztül könnyen módosítható, az átlátszóság mértékét is beállíthatja, ha a 0,2 értéket a sajátjával cseréli.
2. példa: Színátmenet a szöveg felett
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Az intra-diszkrét arpeggio átalakítja a politartományt, ez az egyszeri vertikális az ultrapolifon polifonikus szövetben.
Ez a módszer nem működik a böngészőben internet böngésző a 8.0-s verzióig (beleértve), mert nem támogatja a színátmeneteket. De elhagyhatja a CSS3-at, és a régi módon, PNG-24 képen keresztül gradienst hozhat létre.
Ezt a módszert csak szilárd háttérrel kombináljuk és abban az esetben háttér kép a szöveg feletti színátmenet kiemelkedik.
A kivágott szöveg végén színátmenet helyett ellipszis is használható. Ezenkívül automatikusan hozzáadódik a text-overflow tulajdonság használatával. Ezt minden böngésző megérti, beleértve az IE régebbi verzióit is, és ennek a tulajdonságnak az egyetlen hátránya, hogy eddig nem tisztázott állapota. Úgy tűnik, hogy ez a tulajdonság szerepel a CSS3-ban, de a hozzá tartozó kód nem megy át az érvényesítésen.
A 3. példa a text-overflow tulajdonság használatát mutatja be ellipszis értékkel, amely egy ellipszist ad hozzá. Ha az egérmutatót a szöveg fölé viszi, az teljes egészében megjelenik, és háttérszínnel kiemelve jelenik meg.
3. példa: Text-overflow használata
HTML5 CSS3 IE Cr Op Sa Fx
Ennek a példának az eredménye az ábrán látható. 3.
Rizs. 3. Szöveg ellipszissel
Ezeknek a módszereknek az a nagy előnye, hogy a színátmenet és az ellipszis nem jelenik meg, ha a szöveg rövid és teljesen belefér a megadott területre. Így a szöveg normál módon jelenik meg, ha teljesen látható a képernyőn, és levágódik, ha az elem szélessége csökken.
