Meghatározza a szöveg láthatóságát a blokkban, ha a teljes szöveg nem fér el a megadott területen. Két lehetőség van: a szöveg le van vágva; a szöveget csonkoljuk, és a sor végére egy ellipszis kerül. A text-overflow akkor működik, ha a blokk túlcsordulási tulajdonsága automatikus , görgetés vagy rejtett értékre van állítva.

rövid tájékoztatás

Jelölés

Értékek

clip A szöveg a területhez illeszkedően le van vágva. ellipszis A szöveg csonkolva lesz, és a sor végére hárompontos jel kerül.

Példa

A mágneses tér elhanyagolható mértékben kioltja az égi gömb egy nagy körét, ilyenkor a pályák excentricitásai és dőlései megnőnek.

Eredmény ezt a példátábrán látható. egy.

Rizs. 1. Ellipszis a szöveg végén

Objektummodell

Egy tárgy.style.textOverflow

jegyzet

A 11-es verzió előtti Opera az -o-text-overflow tulajdonságot használja.

Leírás

Minden specifikáció több jóváhagyási szakaszon megy keresztül.

• Recommendation (Recommendation) - a specifikációt a W3C jóváhagyta és szabványként ajánlja.
• Jelölt ajánlás ( Lehetséges ajánlás) - a szabványért felelős csoport meg van győződve arról, hogy az megfelel a céljainak, de a szabvány megvalósításához a fejlesztő közösség támogatása szükséges.
• Javasolt ajánlás ( Javasolt ajánlás) - ebben a szakaszban a dokumentumot benyújtják a W3C Tanácsadó Testületéhez végső jóváhagyásra.
• Munkatervezet – A tervezet kiforrottabb változata a megbeszélés és a közösségi felülvizsgálatra szánt módosítások után.
• Szerkesztői tervezet ( Szerkesztői tervezet) a szabvány vázlatos változata, miután a projektszerkesztők változtatásokat hajtottak végre.
• tervezet ( Specifikációs tervezet) a szabvány első vázlatos változata.

A CSS3 bevezetése forradalmi változást hoz a webdesignerek mindennapi életében. A CSS3 minden nap lenyűgöz bennünket. Azok a dolgok, amelyek korábban csak javascripttel voltak lehetségesek, most könnyen elvégezhetők a CSS3-mal. Tehát például a Szöveg-túlcsordulás.

A webhelyek létrehozása során néha el kell rejtenünk a dinamikus szöveg egy részét anélkül, hogy a következő sorra lépnénk. Vagyis hosszú szöveget szúrjon be egy fix szélességű táblázatba. Ugyanakkor meg kell mutatni a felhasználónak, hogy a szöveg látható része nem minden. Van egy rejtett rész is. Ez egy ellipszis (...) segítségével mutatható meg.

A CSS3-mal ezt egyszerűen megtehetjük a CSS text-overflow tulajdonságával.

jelölés

szöveg-túlcsordulás: ellipszis;

Jelentése ellipszis lehetővé teszi, hogy a szöveg után hárompontos jelet (...) írjon be

A text-overflow: ellipsis tulajdonság akkor hasznos, ha:

1. A szöveg a cellán kívülre kerül
2. A cellában van szabad hely: nowrap.

Van egy 150 képpont széles div, amely megjeleníti a cég nevét az adatbázisból. Ugyanakkor nem akarjuk, hogy hosszú cégnevekre ugorjunk új sorés elkényeztetett megjelenés táblázatok. Azaz el kell rejtenünk a 150 pixelnél nagyobb szöveget. Erről a felhasználót is szeretnénk tájékoztatni. Úgy értette, hogy nem minden cím jelenik meg. És az összes szöveget szeretnénk megjeleníteni, amikor az egeret lebegtetjük.

Nézzük meg, hogyan tehetjük ezt meg a CSS3-mal.

Company-wrap ul li (
szöveg-túlcsordulás: ellipszis;
túlcsordulás: rejtett;
white-space:nowrap; )

Böngésző támogatás

A böngésző támogatásával ennek a tulajdonságnak van egy apró árnyalata. A firefox kivételével minden megfelelően jelenik meg. De szerencsére van megoldás erre a problémára!

Ellipszis a Firefoxban

Sajnos a Firefox gekkója (oldalrenderelő motorja) nem támogatja ezt a tulajdonságot. azonban ezt a böngészőt támogatja az XBL-t, aminek segítségével kilábalunk ebből a helyzetből.

Gekkó egy ingyenes weblapmegjelenítő motor (angol layout engine) böngészők Mozilla Firefox, Netscape és mások. A régi nevek "Raptor" és "NGLayout". A Gecko fő koncepciója az olyan nyílt webes szabványok támogatása, mint a HTML, CSS, W3C DOM, XML 1.0 és JavaScript. Egy másik koncepció a többplatformos. A Gecko jelenleg azon dolgozik operációs rendszer Linux, Mac OS X, FreeBSD és Microsoft Windows, valamint Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga és másokon.

Az ellipszis firefoxban való megjelenítéséhez hozzá kell adnunk egy sort a stíluslaphoz.

ha le szeretné tiltani a tulajdonságot, csak adja hozzá:

moz-binding: url("bindings.xml#none");

Következő lépésként hozzon létre egy bindings.xml fájlt ugyanazon a helyen, ahol a stíluslapot tárolja. Bármelyiket használhatjuk szöveg szerkesztő ezért! Másolja ki az alábbi kódot, és nevezze el a kötések.xml fájlt.

document.getAnonymousNodes(this)[0]
ez.címke.stílus
this.style.display
if(this.style.display != val) this.style.display= val

ez.címke.érték
if(this.label.value != val) this.label.value= érték



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 ? "" : "egyik sem"


this.update()


this.update()

Végső kód minden böngészőhöz

Company-wrap ul li (
szöveg-túlcsordulás: ellipszis;
-o-text-overflow: ellipszis;
-moz-binding: url("bindings.xml#ellipsis");
white-space: nowrap;
túlcsordulás: rejtett;
}

A CSS3 a webdesigner vezető eszközévé válik szerte a világon, amellyel soha nem látott webhelyeket hozhat létre minimális kóddal. Vannak egyszerű, szó szerint egysoros megoldások, amelyekkel korábban csak ez volt lehetséges Photoshop vagy javascriptet. Kezdje el felfedezni a CSS3 és HTML5 erejét még ma, és nem fogja megbánni!

Hogy kiemelkedjek a fordítók szürke tömegéből, és elnyerjem szimpátiájukat, kedves olvasók, óráim végén bölcs gondolatok és aforizmák hangzanak el. Ezekben a sorokban mindenki megtalálja a magáét :)

Méltósággal viseld el azt, amin nem tudsz változtatni.

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.

Változat az egysoros szöveghez CSS-ben

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 ; )

Többsoros szöveg változata CSS-ben

A többsoros szöveg levágásának első módja CSS használatával tulajdonságok pszeudoelemeket alkalmaznak :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 feudeleitnit te augue zzril feudeleitnit.

É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 lehetőség 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:

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 feudeleitnit te augue zzril feudeleitnit.

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; )

Többsoros szöveg változata JavaScriptben

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 ));

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. Ilyenkor van értelme vágni hosszú vonalak szöveget, csak a mondat elejét hagyva. Í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.

Túlcsordulás használata

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 hatásra, 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

Ennek a példának az eredménye az ábrán látható. egy.

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.

Színátmenet hozzáadása a szöveghez

Annak érdekében, hogy egyértelmű legyen, hogy a jobb oldali szöveg ne érjen véget, az átlátszó színtől a 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. Gradiens 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 úgy, hogy a 0,2-es értéket lecseréli a sajátjára.

2. példa: Színátmenet a szöveg felett

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Az intradiszkré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 színátmenetet hozhat létre.

Ez a módszer csak kompatibilis sima háttérés abban az esetben háttér kép a szöveg feletti színátmenet kiemelkedik.

ellipszis a szöveg végén

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

A tudattalan kontrasztot okoz, ezt Lee Ross alapvető attribúciós hibának bélyegzi, amely számos kísérletben nyomon követhető.

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.