Metszés egy- vagy többsoros szöveg magasságban a pontok hozzáadásával. Szöveg túlcsordulás a Firefoxban és minden, minden, minden CSS Troytiech

A CSS3 bevezetése forradalmi változásokkal jár a webes tervezők napi hétköznapjaiban. A CSS3 nem szűnik meg minden nap meglepő. Azok a dolgok, amelyeket csak a JavaScript segítségével végeztek, könnyen elvégezhető a CSS3-val. Például a szöveg-túlcsordulási tulajdonság.

Néha a webhelyek létrehozása során el kell rejtenie a dinamikus szöveg részét anélkül, hogy a következő sorba váltunk. Vagyis helyezzen be egy hosszú szöveget egy rögzített szélességű asztalra. Ugyanakkor meg kell mutatnia a felhasználónak, hogy a szöveg látható része nem minden. Van egy rejtett rész is. Hasonlóan háromirányú (...) segítségével jeleníthető meg.

A CSS3 segítségével könnyedén megvalósíthatjuk a CSS szöveg-túlcsordulás használatával.

Jelzés

Text-túlcsordulás: ellipszis;

Érték ellipszis Lehetővé teszi, hogy hozzáadjon egy troytiech (...)

Text-Overflow tulajdonság: Az Ellipsis akkor hasznos, ha:

1. A szöveg túlmutat a cellában
2. A cellában van szabad hely: mostrap.

Van egy div, amelynek szélessége 150 képpont, hogy megjelenítse a vállalatok nevét az adatbázisból. De ugyanakkor nem akarjuk, hogy a vállalatok hosszú nevei megtanulják egy új vonalat, és elrontják az asztal megjelenését. Vagyis el kell rejtünk a 150 képpont határain túlmutató szöveget. Azt is szeretnénk tájékoztatni a felhasználót róla. Úgy, hogy azt jelentette, hogy a nem minden név jelenik meg. És az egész szöveget az egér lebegéséig akarjuk.

Vessünk egy pillantást, amennyire meg tudjuk csinálni a CSS3-val.

Vállalat-Wrap Ul Li (
text-túlcsordulás: ellipszis;
túlcsordulás: rejtett;
fehér tér: mostrap; )

Böngésző támogatás

A böngészők között a tulajdonságnak van egy kis ápolónője. Minden, kivéve a Firefoxot, tökéletesen megjelenik megfelelően. De énekelnek, van egy megoldás és ez a probléma!

Troyaty a Firefoxban.

Sajnos, Gecko (a C) Firefox kimeneti motorja nem támogatja ezt a tulajdonságot. Azonban ez a böngésző támogatja az Xbl-t, amivel kijönünk ebből a helyzetből.

Gekkó. - Ez egy ingyenes motor kimeneti motor (angol elrendezés motor) böngészők Mozilla Firefox, Netscape és mások. A régi nevek "Raptor" és "Nglayout". A Gecko fő koncepciója a nyílt internetes szabványok, például a HTML, a CSS, a W3C DOM, az XML 1.0 és a JavaScript támogatása. Egy másik koncepció - Cross-platform. A mai napig a Gecko működik a Linux operációs rendszereken, a Mac OS X, a FreeBSD és a Microsoft Windows, valamint a Solaris, a HP-UX, AIX, IRIX, OS / 2, OpenVM, BEOS, AMGA és mások.

Hármas megjelenítéséhez a Firefox-ban, hozzá kell adnunk egy karakterláncot a stíluslapra.

ha letiltani szeretné az ingatlant, egyszerűen hozzáadja:

Moz-kötődés: URL ("bindings.xml # nincs");

A következő lépés egy bindings.xml fájl létrehozása ugyanabban a helyen, ahol a stíluslapot tárolja. Ezt a szövegszerkesztőt használhatjuk erre! Másolja az alábbi kódot, és nevezze meg a bindings.xml fájlt.

Dokumentum.GetanonymousNodes (ez) [0]
This.label.style
This.style.display.
ha (this.style.display! \u003d val) this.style.display \u003d val

Ez.Label.value.
Ha (ez.label.value! \u003d Val) this.label.value \u003d Val



Varrings \u003d this.textcontent.split (/ s + / g)
Ha (! Strings [0]) Strings.Shift ()
Ha (! Strings [Strings.Length - 1]) Strings.pop ()
this.value \u003d Strings.join ("")
this.display \u003d Strings.Length? "": "EGYIK SEM"




ez.Update ()


ez.Update ()

Végső kód minden böngésző számára

Vállalat-Wrap Ul Li (
Text-túlcsordulás: ellipszis;
-O-Text-túlcsordulás: ellipszis;
-Moz-kötődés: URL ("bindings.xml # ellipszis");
Fehér tér: mostrap;
Túlcsordulás: rejtett;
}

A CSS3 a világ minden táján szereplő webes tervezői eszközökévé válik, hogy soha nem látott webhelyeket hozzon létre minimális kóddal. Vannak egyszerű, szó szerint egy sorban, olyan megoldások, amelyek korábban csak a Photoshop vagy a JavaScript segítségével voltak lehetségesek. Indítsa el a CSS3 és a HTML5 funkciók tanulmányozását, és nem fogod megbánni!

Ahhoz, hogy kiemelkedjen a fordítók szürke tömegéből, és meghódítsa a szimpátiákat, kedves olvasóim, a leckék végén bölcs gondolatok és aforizmák lesznek. Mindegyik vonal talál valamit :)

Transzfer előnyben, hogy nem változtathat meg.

A rögzített magasság és szélesség egység belsejében tetszőleges hosszúságú szöveg van. Ebben az esetben, ha a szöveg nincs teljesen elhelyezve, megjeleníteni kell a szöveges fragmentumot, amely teljesen meghatározott blokkban van elhelyezve, majd a pont beállítása után.

Ez a feladat meglehetősen gyakori, ugyanakkor nem olyan triviális, mint amilyennek tűnik.

Lehetőség az egysoros szövegre a CSS-en

Ebben az esetben használhatja a Text-Overflow tulajdonságot: ellipszis. Ebben az esetben a tartálynak rendelkeznie kell egy tulajdonsággal. túlcsordulás. Egyenlő rejtett. vagy csipesz

Blokk (szélesség: 250px, fehér tér: mostrap, túlcsordulás: rejtett, szöveg-túlcsordulás: ellipszis;)

Lehetőség a többsoros szövegre a CSS-re

A többsoros szöveg vágásának első módja a CSS tulajdonságainak használatával a pszeudo-elemek alkalmazásához : Korábban. és : utána.. A HTML jelölés megkezdéséhez

Lorem Ipsum dolor sit Amet, consectetuer adipiscing Elit, Sed Átm Nonummy nibh Euismod tincidunt UT Laoreet dolore Magna Ossza Erat Volutpat. UT WISI ENIM AD MINIM VENIAM, Quis NOSTRUD EXERCI TATION ullamcorper suscipit LOBORTIS NISL UT ALIQUIP EX EA COMMODO CONSEQUAT. Duis autem vel eum iriure dolor a hendrerit a vulputate Velit esse molestie consequat, VEL Illum dolore eu feugiat nulla facilisis meg Vero Eros et accumsan et iusto odio dignissim qui blandit Kapcsolat luptatum zzril delenit augue Duis dolore TE feugait nulla facilisi.

És most maguk a tulajdonságok

Doboz (túlcsordulás: rejtett; magasság: magasság: 200px, szélesség: 300px; vonalmagasság: 25px;) .mox: korábban: "Float: Bal, szélesség: 5px; magasság: 200 px;) .mox\u003e *: első -child (úszó : Jobb; Szélesség: 100%; margó-balra: -5px;). Pox: után (tartalom: "\\ 02026"; Box-méretezés: Content-Box; Float: Jobb; Pozíció: Relative; Top: -25px; bal : 100%; szélesség: 3em; margó-balra: -3em; Padding-Right: 5px; szöveg-igazítás: jobb; háttérméret: 100% 100%; Háttér: Lineáris-gradiens (jobbra, RGBA (255, 255) , 255, 0), fehér 50%, fehér);););

Egy másik mód az, hogy az oszlopszélesség tulajdonságot használja, amellyel az oszlop szélességét a többsoros szöveghez állítottuk. Igaz, ha ezt a módszert használja, az ellipszis végének megteremtéséhez. HTML:

Lorem Ipsum dolor sit Amet, consectetuer adipiscing Elit, Sed Átm Nonummy nibh Euismod tincidunt UT Laoreet dolore Magna Ossza Erat Volutpat. UT WISI ENIM AD MINIM VENIAM, Quis NOSTRUD EXERCI TATION ullamcorper suscipit LOBORTIS NISL UT ALIQUIP EX EA COMMODO CONSEQUAT. Duis autem vel eum iriure dolor a hendrerit a vulputate Velit esse molestie consequat, VEL Illum dolore eu feugiat nulla facilisis meg Vero Eros et accumsan et iusto odio dignissim qui blandit Kapcsolat luptatum zzril delenit augue Duis dolore TE feugait nulla facilisi.

Blokk (túlcsordulás: rejtett, magasság: 200px, szélesség: 300px;) .block__inner (-webkit-oszlopszélesség: 150px; -Moz-oszlopszélesség: 150px; oszlopszélesség: 150px; magasság: 100%;

A többsoros szöveg megoldásához a CSS-en a böngészők számára készült Webkit.. Benne több adott tulajdonságot kell használnunk az előtaggal -Webkit.. A fő IS-WEBKIT-LINE-CLAMP, amely lehetővé teszi a blokkban megjelenített karakterláncok számát. A megoldás gyönyörű, de meglehetősen korlátozott, a böngészők korlátozott csoportjában való munkája miatt

Blokk (túlcsordulás: rejtett; szöveges túlcsordulás: ellipszis; kijelző: -webkit-box; webkit-line-clamp: 2; webkit-box-Orient: függőleges;)

Opció a többsoros szöveghez a JavaScript-en

Egy további láthatatlan blokkot használ, amelyben szövegünket eredetileg elhelyezték, majd egy karakterből eltávolítják, amíg a készülék magassága kevésbé vagy egyenlő a kívánt blokk magasságával. És a végén a szöveg a forrásblokkra mozog.

varblokk \u003d dokumentum. Queryselector (".block"), szöveg \u003d blokk. Innerhtml, klón \u003d dokumentum. CreateEelement ("div"); Klón. Stílus. Pozíció \u003d "abszolút"; Klón. Stílus. láthatóság \u003d "rejtett"; Klón. Stílus. Szélesség \u003d blokk. CRIENTWIDTH + "PX"; Klón. innerhtml \u003d szöveg; Dokumentum. Test. Appendchild (klón); Var l \u003d szöveg. Hossza - 1; Mert (; l\u003e \u003d 0 && klón. ClientHeight\u003e Block. ClientHeight; - L) (klón. Innerhtml \u003d szöveg. Alapozás (0, L) + "...";). Innerhtml \u003d klón. Innerhtml;

Ugyanaz a jquery plugin formájában:

(Függvény ($) (var truncate \u003d el. Szöveg \u003d el. Szöveg (), magasság \u003d el. Magasság (), klón \u003d el. Klón (); klón. CSS ((pozíció: "abszolút", láthatóság: "Rejtett ", Magasság:" AUTO ")); El. Után (klón); var l \u003d szöveg. Hossza - 1; az (; l\u003e \u003d 0 && klón. Magasság ()\u003e magasság; - l) (klón. szöveg. aljzat (0, l) + "...");) El. szöveg (klón szövege ()); klón. eltávolítás ();); $. fn. Truncatetext \u003d funkció () Funkció () (csonkítás ($);));););) (jQuery));

Néha azonban az áruk linkjeinek hosszú neve irritált - három vonal, vagy különböző blokkok hosszú fejlécje. Hogyan lehet nagyszerű lenne, ha valahogy minden munkát végezhet, kompakt. És ha az egér már teljesen megjeleníti a címet.

Ehhez kedvenc CSS lesz a mentéshez. Minden nagyon egyszerű, nézd meg.

Tegyük fel, hogy ilyen blokk van a katalógusból az árukkal:

Itt van annak szerkezete:

Miracle Yudo túlsúlyos syloper, titokzatos, művészet. 20255-59

Csodálatos áruk egy szuper áron, mindössze 100 rubel. Karcolja meg magányos estét, és adjon egy árapályt!

Itt van az ő stílusai:

Némablock (határ: 1px szilárd #ccccccccccccccccccccc; margó: 15px Auto, Padding: 10px, szélesség: 250px;) .Header (Border-Bottom: 1px szaggatott; Betűtípus: 16px; ;)

Egyetértek, szörnyűnek tűnik. Természetesen csökkentheti az áruk nevét. De mi van, ha ilyen több száz vagy ezer? A PHP-t a cím részének vágásához is használhatja, korlátozhatja a karaktereket. De mit kell tennem, ha az elrendezés megváltozik, és a blokkok kevesebbek lesznek, mint ellenkezőleg, 2-3-szorosabbak? Mindez nem opció, mindez nem alkalmas számunkra.

És itt fogunk jönni a mentéshez és a mágikus tulajdonához szöveg túlcsordulás.. De több más tulajdonsággal együtt kell használni. Az alábbiakban megmutatom neked egy kész megoldást, amely után megmagyarázom, mi.

Tehát felé manuális szerkesztése a nevét áruk és szoftver vágás stílusok vesszük kezébe CSS és nézd meg velünk:

Miracle Yudo túlsúlyos syloper, titokzatos, művészet. 20255-59

Csodálatos áruk egy szuper áron, mindössze 100 rubel. Karcolja meg magányos estét, és adjon egy árapályt!

Nos, jobb? Nagyon sokat gondolok! És hozza az egeret a címre ... Voila! Itt teljesen megjelenik.

A szerkezetben nem változtattunk semmit, csak egy osztályú Divát adtam hozzá .Fejléc. Cím címke. És itt vannak új, kiegészített stílusok:

Némablock (határ: 1px szilárd #ccccccccccccccccccccc; margó: 15px Auto, Padding: 10px, szélesség: 250px;) .Header (Border-Bottom: 1px szaggatott; Betűtípus: 16px; ; Túlcsordulás: rejtett, szöveg-túlcsordulás: ellipszis; fehér tér: mostrap;)

Nézze meg, mit tettünk:

• Adtunk egy ingatlanegységet. fehér tér: Mostrapamely eltávolítja a szavakat az új karakterláncba a szövegben, ezáltal a vonalba húzva;
• Ezután hozzáadunk ingatlant túlcsordulás: rejtett.amely korlátozta a láthatóságát a blokk széles húr, így gyengíti mindent túl sokat, és mutatja, hogy a látogató;
• Nos, a végén hozzáadunk Troytiech-t a sor média tulajdonságainkhoz text-túlcsordulás: ellipszisÍgy, így a látogató megérteni, hogy ez nem a sor vége, és amire szüksége van, valószínűleg hozza a mosogatót, és látja teljesen.

Love CSS, tanulmány CSS, és a webhely épülete nem tűnik ilyen nehéz dolognak \u003d)

Vlad merzehevich

Annak ellenére, hogy a nagy átlós monitorok egyre inkább hozzáférhetőbbek, és állásfoglalásuk folyamatosan növekszik, néha a korlátozott térben lévő feladat, hogy sok szöveget biztosítson. Például szükség lehet a webhely mobil verziójára vagy egy olyan felületre, amelyben a sorok száma fontos. Ilyen esetekben értelme a hosszú szövegsorokat, így csak a mondat kezdetét hagyja el. Így adjuk meg az interfészt egy kompakt formához, és csökkentjük a megjelenített információk mennyiségét. A sorok vágása a kiszolgáló oldalán ugyanazzal a PHP segítségével történhet, de a CSS segítségével egyszerűbb, továbbá mindig teljes egészében megjelenítheti a szöveget, például amikor az egérmutatót lebegítheti. Ezután fontolja meg a módszerek módját, hogy a szöveg kivágja a képzeletbeli ollót.

Valójában minden leesik a túlfolyó tulajdonságok használatához a rejtett értékkel. A különbségek csak a szövegünk különböző megjelenítésében lick.

Túlcsordulás használatával

Annak érdekében, hogy a túlcsordulási tulajdonság minden dicsőségében megjelenjen a szöveggel, meg kell szakítania a szöveges átutalást a White-Space segítségével a SOVERAP értékével. Ha ez nem történik meg, akkor a szükséges hatás nem lesz, a transzferek hozzáadódnak a szövegben, és teljes mértékben jelenik meg. Az 1. példában bemutatjuk, hogyan kell a hosszú szöveget a megadott stílus tulajdonságokkal.

1. példa A szöveg túlcsordulása

Html5 css3, azaz CR OP SA FX

A példa eredményét az 1. ábrán mutatjuk be. egy.

Ábra. 1. A túlcsordulási tulajdonságok alkalmazása után szövegtípus

Amint a rajzból látható, a hiánya egésze egy - nem nyilvánvaló, hogy a szöveg folytatása van, ezért ezt a felhasználónak kell megadnia. Ez jellemzően gradiens vagy ellipszis alkalmazandó.

Adjon hozzá gradientet a szöveghez

Annak érdekében, hogy világossá tegye, hogy a jobb oldali szöveg nem ér véget, tetején egy átlátszó színt alkalmazhat a háttér színéhez (2. ábra). Ez megteremti a szöveg fokozatos feloszlatásának hatását.

Ábra. 2. Szöveg gradienssel

A 2. példa bemutatja ennek a hatásnak a létrehozását. Maga az elem stílusa gyakorlatilag megmarad, a gradiens maga a pszeudo-elem :: Utaster és CSS3 segítségével kerül hozzáadásra. Ehhez helyezzen be egy üres pszeudo-elemet a tartalom tulajdonságon keresztül, és használjon fokozatot különböző előtagokkal a fő böngészők (2. példa). A gradiens szélessége könnyen válthat szélességgel, akkor is beállíthatja az átláthatóság mértékét, és a 0,2 értéket önmagában helyettesítheti.

2. példa Szöveges gradiens

HTML5 CSS3 IE 8 IE 9+ CR OP SA FX

Az intradiscree arpeggio egy polimert átalakít, ez egyfokozatú függőleges egy ultra-mezőgazdasági polifonikus szövetben.

Ez a módszer nem működik az Internet Explorer böngészőben a 8.0 verzióba, mivel nem támogatja a gradienseket. De hagyhatja el a CSS3-ot, és gradienset készíthet a régi módon, a képen keresztül PNG-24 formátumban.

Ez a módszer csak egy monofonikus háttérrel kombinálódik, és háttérkép esetén a szöveges gradiens a szemébe rohan.

Pont a szöveg végén

A vágott szöveg végén lévő gradiens helyett pontot is használhat. Ezenkívül automatikusan hozzáadódik a szöveg-túlcsordulási tulajdonság használatával. Megérti az összes böngészőt, beleértve az IE régebbi verzióit, és ennek a tulajdonságnak az egyetlen hátránya még mindig homályos állapota. A CSS3-ban úgy tűnik, hogy ez a tulajdonság magában foglalja, de a kód nem validálható.

A 3. példában az ellipszis értékkel rendelkező szöveg-túlcsordulási tulajdonság alkalmazása, amely egy pontot ad hozzá. Ha az egérmutatót lebegíti a szövegen, akkor teljes egészében megjelenik, és a háttér jelzi.

3. példa A szöveg túlcsordulása

Html5 css3, azaz CR OP SA FX

Az eszméletlen a kontrasztot okozza, a Ross jelzi, mint az attribútum alapvető hibáját, amely sok kísérletben nyomon követhető.

A példa eredményét az 1. ábrán mutatjuk be. 3.

Ábra. 3. Szöveg ponttal

Ezeknek a módszereknek a nagy plusz az a pillanat, amikor a gradiens és a dullness nem jelenik meg, ha a szöveg rövid és teljesen elhelyezve van a megadott területen. Tehát a szöveg szokásos módon jelenik meg, ha teljesen látható a képernyőn, és csökkenti az elem szélességét.