Hur ibland irriterande är de långa namnen på produktlänkar - tre rader vardera - eller de långa rubrikerna på andra block. Vad bra det skulle vara om det hela på något sätt kunde minskas, göras mer kompakt. Och när du håller musen över den, visa titeln i sin helhet.

För detta kommer vår favorit-CSS till vår hjälp. Det är väldigt enkelt, titta.

Låt oss säga att vi har ett sådant här block från en produktkatalog:

Här är dess struktur:

Här är hans stilar:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px streckad; font-size: 16px; font-weight: bold; margin-bottom: 12px bott ;)

Håller med, det ser hemskt ut. Naturligtvis kan du förkorta namnet på produkten. Men vad händer om det finns hundratals eller tusentals av dem? Du kan också använda PHP för att trimma bort en del av namnet och begränsa det till ett visst antal tecken. Men vad händer om layouten ändras senare och blocken är mindre eller tvärtom 2-3 gånger större? Inget av detta är ett alternativ, inget av det här passar oss.

Och här kommer CSS och dess magiska egendom till vår hjälp text-spill. Men det måste användas korrekt tillsammans med flera andra fastigheter. Nedan kommer jag att visa dig en färdig lösning, varefter jag kommer att förklara vad som är vad.

Så, om vi lägger undan manuell redigering av produktnamn och programmatisk beskärning av stilar, tar vi CSS i våra händer och ser vad vi får:

Miracle Yudo kväll kraftgivare, mystisk, konst. 20255-59

En underbar produkt till ett superpris, bara 100 rubel. Det kommer att lysa upp dina ensamma kvällar och ge dig en våg av vitalitet!

Tja, är det bättre? Enligt mig väldigt mycket! Och flytta musen över titeln... voila! Här visas den för oss i sin helhet.

Ingenting har förändrats i vår struktur, jag har bara lagt till en diva med en klass .rubrik titeltagg. Och här är de nya, uppdaterade stilarna:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px streckad; font-size: 16px; font-weight: bold; margin-bottom: 12px bott ; overflow: dold; text-overflow: ellips; white-space: nowrap;)

Titta vad vi gjorde:

• Vi har lagt till en fastighet i kvarteret white-space: nowrap, vilket tar bort möjligheten för texten att slå in ord på ny linje, därigenom dra den i en linje;
• Sedan lade vi till fastigheten overflow: gömd, som begränsade synligheten av vår linje till blockets bredd, och därigenom skär av allt onödigt och inte visade det för besökaren;
• Tja, i slutet lade vi till en ellips till vår linje med hjälp av egenskapen text-overflow: ellips, vilket låter besökaren förstå att detta inte är slutet på raden, och att de förmodligen behöver lyfta musen och titta på den i sin helhet.

Älskar CSS, lär dig CSS och att bygga webbsidor kommer inte att verka så svårt för dig =)

Många har säkert stött på problemet när en del text måste visas på en rad. Dessutom kan texten vara ganska lång, och bredden på blocket där denna text finns är vanligtvis begränsad till minst samma storlek på webbläsarfönstret. För dessa fall uppfanns text-overflow-egenskapen, som ingick i CSS3-rekommendationen, och som först implementerades i IE6 för mycket länge sedan. När du använder den här egenskapen för ett block, om dess text är bredare än själva blocket, skärs texten av och en ellips placeras i slutet. Även om allt inte är så enkelt här så återkommer vi till detta lite senare.
Med Internet Explorer är allt klart, hur är det med andra webbläsare? Och även om egenskapen text-overflow för närvarande är undantagen från CSS3-specifikationen, stöder Safari det (enligt minst, i version 3), Opera också (sedan version 9, även om egenskapen kallas -o-overflow-text). Men Firefox gör det inte, det stöder det inte, och även i version 3 kommer det inte att göra det. Tråkigt men sant. Men något kanske kan göras?

Självklart går det att göra. När jag tittade på Internet om den här egenskapen och hur man gör det i Firefox, stötte jag på enkel lösning. Kärnan i lösningen:

Det är allt. Läs artikeln för detaljer.
Lösningen är inte dålig, men det finns problem:

1. Texten kan vara avskuren i mitten (relativt sett) av brevet, och vi kommer att se dess "stubb".
2. Ellipsen visas alltid, även när texten är mindre än blockets bredd (det vill säga den faller inte ur den och ellipsen behövs inte).

Steg ett

Låt oss först fokusera på det andra problemet, nämligen hur man undviker att visa ellips när det inte behövs. Efter att ha råkat ut för hjärnan och experimenterat "lite" hittade jag en lösning. Jag ska försöka förklara.
Poängen är att vi behöver ett separat block med en ellips som bara dyker upp när texten tar för mycket plats på bredden. Sedan kom jag på idén om ett fallande flytande block. Även om det låter läskigt betyder det bara ett block som alltid är där och tryckt åt höger, men när textens bredd blir stor trycker texten blocket till nästa rad.
Låt oss gå vidare till praktiken, annars är det svårt att förklara. Låt oss ställa HTML-struktur:

mycket lång text

Inte särskilt kompakt, men jag kunde inte göra något mindre. Så vi har ett containerblock DIV.ellipsis, ett block med vår text och ett annat block som kommer att innehålla ellipsen. Observera att "ellipsblocket" faktiskt är tomt, eftersom vi inte behöver de extra tre prickarna när vi kopierar texten. Var inte heller orolig över bristen på ytterligare klasser, eftersom denna struktur är väl adresserad med hjälp av CSS-väljare. Och här är själva CSS:

.ellipsis ( overflow: hidden; white-space: nowrap; linjehöjd: 1,2em; höjd: 1,2em; kant: 1px fast röd; ) .ellipsis > DIV:första-barn (float: vänster; ) .ellipsis > DIV + DIV ( flyta: höger; marginal-top: -1,2em; ).ellipsis >

Det är allt. Vi kontrollerar och ser till att det fungerar som det är tänkt i Firefox, Opera, Safari. I IE finns ett mycket märkligt, men förutsägbart resultat. I IE6 är allt borta, men i IE7 fungerar det helt enkelt inte, eftersom det inte stöder genererat innehåll. Men vi kommer tillbaka till IE senare.

Låt oss nu titta på vad vi har gjort. Först ställer vi in ​​linjehöjden och höjden på huvudblocket, eftersom vi behöver veta höjden på blocket och höjden på textraden. Vi ställer in samma värde för marginalen-toppen av blocket med en ellips, men med ett negativt värde. Således, när blocket inte "återställs" till nästa rad, kommer det att vara ovanför textraden (en rad), när det återställs, kommer det att vara på sin nivå (i själva verket är det lägre, vi drar det bara en rad upp). För att dölja onödiga saker, särskilt när det inte finns något behov av att visa ellipsen, gör vi översvämning: dold för huvudblocket, så när ellipsen är ovanför linjen kommer den inte att visas. Detta gör att vi också kan ta bort text som faller utanför blocket (till högerkanten). För att förhindra att texten oväntat slås om och trycker på blocket med ellipsen lägre och lägre, gör vi blanksteg: nowrap, och förbjuder därmed bindestreck - vår text kommer alltid att vara på en rad. För blocket med text sätter vi float: left så att det inte omedelbart kollapsar blocket med ellipsen och tar upp minsta bredd. Eftersom inne i huvudblocket (DIV.ellipsis) båda blocken är flytande (flytande: vänster/höger), kommer huvudblocket att kollapsa när textblocket är tomt, så för huvudblocket sätter vi en fast höjd (höjd: 1,2em) . Och slutligen använder vi ::after pseudo-elementet för att visa ellipsen. För detta pseudo-element ställer vi också in en bakgrund för att täcka texten som kommer att visas under den. Vi sätter en ram för huvudblocket bara för att se måtten på blocket; senare tar vi bort det.
Om Firefox stödde pseudo-element såväl som Opera och Safari vad gäller deras positionering (inställning av position/float etc för dem), så skulle det vara möjligt att inte använda ett separat block för ellips. Försök att ersätta de tre senaste reglerna med följande:

.ellipsis > DIV:first-child::after ( flytande: höger; innehåll: "..."; margin-top: -1,2em; bakgrundsfärg: vit; position: relativ; )

i Opera och Safari fungerar allt som tidigare, och utan extra ellipsblock. Men Firefox är en besvikelse. Men det är för honom vi fattar beslutet. Tja, du får nöja dig med den ursprungliga HTML-strukturen.

Steg två

Som du kanske har märkt så blev vi av med problemet med att ellipser dyker upp när texten får plats i ett block. Vi har dock fortfarande ett problem till - texten är avskuren i mitten av bokstäverna. Och dessutom fungerar det inte i IE. För att övervinna båda måste du använda den ursprungliga text-overflow-regeln för webbläsare, och endast för Firefox använd lösningen som beskrivs ovan (det finns inget alternativ). Vi kommer att ta reda på hur man skapar en lösning "endast för Firefox" senare, men låt oss nu försöka få det vi har att fungera med text-overflow. Låt oss justera CSS:en:

.ellipsis ( overflow: hidden; white-space: nowrap; linjehöjd: 1,2em; höjd: 1,2em; kant: 1px fast röd; text-overflow: ellips; -o-text-overflow: ellips; bredd: 100%; } .ellipsis * ( display: inline; ) /*.ellipsis > DIV:första-barn ( float: vänster; ) .ellipsis > DIV + DIV ( float: höger; margin-top: -1,2em; ) .ellipsis > DIV + DIV::efter ( bakgrundsfärg: vit; innehåll: "..."; ) */

Som det visade sig finns det inte mycket att redigera. Tre rader har lagts till i huvudblockstilen. Två av dem innehåller textspill. Träning bredd bredd: 100 % behövs för IE så att texten inte expanderar blocket till oändlighet, och text-overflow-egenskapen fungerar; I huvudsak begränsade vi bredden. I teorin sträcker sig DIV, precis som alla blockelement, över hela behållarens bredd, och bredd: 100 % är värdelöst, och till och med skadligt, men IE har problem med layouten, eftersom behållaren alltid sträcker sig för att passa innehållet, så det finns inget annat sätt. Vi gjorde också alla interna element inline, eftersom för vissa webbläsare (Safari & Opera) fungerar inte text-overflow annars, eftersom det finns blockelement inuti. Vi kommenterade de tre senaste reglerna, eftersom de i det här fallet inte behövs och bryter mot allt (konflikt). Dessa regler kommer endast att behövas för Firefox.
Låt oss se vad vi har och fortsätta.

Steg tre

När jag återigen tittade på sidan (innan jag skulle skriva den här artikeln) som nämndes i början, då, av nyfikenhet, tittade jag igenom kommentarerna efter smarta relaterade idéer. Och jag hittade det i en kommentar som talade om en annan lösning som fungerar i Firefox och IE (för den här personen, som för författaren till den första artikeln, finns det tydligen inga andra webbläsare). Så, i den här lösningen, hanterar författaren detta fenomen (avsaknaden av text-overflow) på ett lite annorlunda sätt, och kopplar hanterare till overflow- och underflow-händelser till element för vilka det var nödvändigt att sätta en ellips om nödvändigt. Inte illa, men det verkar för mig som att den här lösningen är väldigt dyr (i termer av resurser), särskilt eftersom den är något glitchy. Men när han kom på hur han uppnådde detta, stötte han på en intressant sak, nämligen CSS-egenskaper o -moz-bindning. Så vitt jag förstår är detta en analog av beteende i IE, bara med en annan sås och kylare. Men vi går inte in på detaljer, låt oss bara säga att på detta sätt kan du koppla en JavaScript-hanterare till ett element med använder CSS. Det låter konstigt, men det fungerar. Vad gör vi:

.ellipsis ( overflow: hidden; white-space: nowrap; linjehöjd: 1,2em; höjd: 1,2em; kant: 1px fast röd; text-overflow: ellips; -o-text-overflow: ellips; bredd: 100 % ; -moz-bindning: url(moz_fix.xml#ellipsis); zoom: 1;) .ellipsis * ( display: inline; ) .moz-ellipsis > DIV:första barn( flyta till vänster; display: block; } .moz-ellipsis > DIV + DIV( flyta: höger; marginal-top: -1,2em; display: block; } .moz-ellipsis > DIV + DIV::efter(bakgrundsfärg: vit; innehåll: "..."; )

Som du kan se gjorde vi återigen inte många ändringar. I det här steget i IE7 finns det ett konstigt fel, allt är skevt om du inte ställer in zoom: 1 för huvudblocket (det enklaste alternativet). Om du tar bort (ta bort, kommentera) regeln .ellipsis * eller .moz-ellipsis > DIV + DIV (som inte påverkar IE7 alls), så försvinner felet. Det här är konstigt, om någon vet vad som är fel, låt mig veta. För nu nöjer vi oss med zoom: 1 och går vidare till Firefox.
Egenskapen -moz-bindning inkluderar filen moz_fix.xml med en instruktion med identifieraren ellips. Innehållet i detta xml-fil följande:

Allt den här konstruktören gör är att lägga till moz-ellipsis-klassen till det element som väljaren arbetade för. Detta kommer bara att fungera i Firefox (gecko-webbläsare?), så bara i den kommer moz-ellipsis-klassen att läggas till i elementen, och vi kan lägga till ytterligare regler. Det var vad de ville. Jag är inte helt säker på behovet av this.style.mozBinding = “”, men av erfarenhet av uttryck är det bättre att vara på den säkra sidan (i allmänhet är jag inte så bekant med den här sidan av Firefox, så Jag kan missta mig).
Du kan bli orolig över att denna teknik använder en extern fil och JavaScript i allmänhet. Det finns ingen anledning att vara rädd. För det första, om filen inte laddas och/eller JavaScript är inaktiverat och inte fungerar, är det okej, användaren kommer helt enkelt inte att se ellipsen i slutet, texten kommer att skäras av i slutet av blocket. Det vill säga, i det här fallet får vi en "diskriminerande" lösning. Du kan se själv.

Således fick vi en stil för "Big Four" webbläsare, som implementerar text-overflow för Opera, Safari och IE, och emulerar det för Firefox, inte särskilt bra, men det är bättre än ingenting.

Steg fyra

Vi skulle kunna sätta stopp för denna punkt, men vi skulle vilja förbättra vår lösning lite. Eftersom vi kan koppla en konstruktor till vilket block som helst och följaktligen få kontroll över det, varför inte dra fördel av detta. Låt oss förenkla vår struktur:

mycket lång text

Åh ja! Jag tror att du kommer att hålla med mig - det här är vad du behöver!
Låt oss nu ta bort alla onödiga saker från stilen:

.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1,2em; höjd: 1,2em; text-overflow: ellips; -o-text-overflow: ellips; bredd: 100%; -moz-bindning: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:första-barn (float: vänster; ) .moz-ellipsis > DIV + DIV (float: höger; margin-top: -1,2em; ) .moz -ellipsis > DIV + DIV::efter (bakgrundsfärg: vit; innehåll: "..."; )

Vi har äntligen tagit bort den röda kanten :)
Låt oss nu lägga till lite till vår moz_fix.xml:

Vad händer här? Vi återskapar vår ursprungliga HTML-struktur. Det vill säga att de svårigheterna med block görs automatiskt, och endast i Firefox. JavaScript-koden är skriven i de bästa traditionerna :)
Tyvärr kan vi inte undvika situationen när texten skärs av i mitten av brevet (dock, kanske tillfälligt, eftersom min lösning fortfarande är väldigt grov, och den kanske fungerar i framtiden). Men vi kan jämna ut den här effekten lite. För att göra detta behöver vi en bild (en vit bakgrund med en transparent gradient) och några ändringar i stilen:

.moz-ellipsis > DIV:första barn ( flyta: vänster; marginal-höger: -26px;) .moz-ellipsis > DIV + DIV ( float: höger; marginal-top: -1,2em; bakgrund: url(ellipsis.png) repeat-y; padding-vänster: 26px; }

Låt oss titta och njuta av livet.

Låt oss sätta stopp för detta.

Slutsats

Jag ska ge dig ett litet exempel för tredjepartslayout. Jag tog innehållsförteckningen på en av Wikipedia-sidorna (den första som kom upp) och tillämpade metoden som beskrivs ovan på den.
I allmänhet detta beslut kan kallas universell endast med en sträcka. Allt beror på din layout och dess komplexitet. Du kan behöva en fil, eller kanske en tamburin. Även om jag i de flesta fall tror att det kommer att fungera. Och då har du nu en utgångspunkt ;)
Jag hoppas att du lärde dig något intressant och användbart från artikeln;) Lär dig, experimentera, dela.
Lycka till!

Det finns text av godtycklig längd som måste visas inuti ett block med fast höjd och bredd. I det här fallet, om texten inte passar helt, bör ett fragment av text som helt passar in i det givna blocket visas, varefter en ellips sätts.

Denna uppgift är ganska vanlig, men samtidigt är den inte så trivial som den verkar.

Alternativ för enkelradstext i CSS

I det här fallet kan du använda egenskapen text-overflow: ellipsis. I detta fall måste behållaren ha egendomen svämma över likvärdig dold eller klämma

Block ( bredd : 250 px ; blanksteg : norap ; överlopp : dold ; textöverflöde : ellips ; )

Alternativ för flerradstext i CSS

Det första sättet att trimma flerradstext är med använder CSS egenskaper tillämpar pseudoelement :innan Och :efter. Låt oss komma igång med HTML-uppmärkning

Och nu själva fastigheterna

Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( innehåll : "" ; float : left ; width : 5px ; höjd : 200px ; *:first box >; ) . -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( innehåll : "\02026" ; box-storlek : content-box ; float : höger ; position : relativ ; topp : -25px ; vänster : 100 % ; bredd : 3em ; marginal-vänster : -3em ; utfyllnad-höger : 5px ; textjustering: höger ; bakgrundsstorlek : 100 % 100 % ; bakgrund : linjär-gradient (till höger , rgba (255 , 255 , 255 , 0 ), vit 50 % , vit ); )

Ett annat sätt är att använda egenskapen column-width, med vilken vi ställer in kolumnbredden för flerradstext. Men när du använder denna metod kommer det inte att vara möjligt att ställa in en ellips i slutet. HTML:

Block ( overflow : hidden ; height : 200px ; width : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width : 150px ; 0% 150px ; 0

Det finns ett tredje sätt att lösa flerradstext med CSS för webbläsare Webkit. I den måste vi använda flera specifika egenskaper med prefixet -webbkit. Den huvudsakliga är -webkit-line-clamp som låter dig specificera antalet rader som ska matas ut i ett block. Lösningen är vacker men ganska begränsad på grund av dess arbete i en begränsad grupp av webbläsare

Block ( overflow : hidden ; text-overflow : ellips ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ;)

Alternativ för flerradstext i JavaScript

Här används ytterligare ett osynligt block, i vilket vår text initialt placeras, varefter den tas bort ett tecken i taget tills höjden på detta block blir mindre än eller lika med höjden önskat block. Och i slutet flyttas texten till originalblocket.

var block = dokument. querySelector(".block"), text = block. innerHTML, klon = dokument. createElement("div"); klona stil. position = "absolut" ; klona stil. synlighet = "dold" ; klona stil. bredd = block . clientWidth + "px" ; klona innerHTML = text ; dokumentera. kropp. appendChild(klon); var l = text . längd - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( clone . innerHTML = text . substring ( 0 , l ) + "..." ; ) block . innerHTML = klon . innerHTML ;

Detta är samma sak som ett plugin för jQuery:

(funktion ($ ) ( var trunkera = funktion (el ) ( var text = el . text (), höjd = el . höjd (), clone = el . clone (); clone . css (( position : "absolut" , synlighet : "dold" , höjd : "auto" )); el . efter (klon ); var l = text . längd - 1 ; för (; l >= 0 && klon . höjd () > höjd ; -- l ) ( clone . text ( text . substring ( 0 , l ) + "..." ); ) el . text ( clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( returnera denna . varje (funktion () ( trunkera ($ (denna)); )); ); )(jQuery ));

Definierar synlighetsparametrarna för text i ett block om hela texten inte passar in i det angivna området. Det finns två alternativ: texten är avskuren; texten klipps av och en ellips läggs till i slutet av raden. text-overflow fungerar om blockets overflow-egenskap är inställd på auto , scroll eller hidden .

kort information

Beteckningar

	Beskrivning	Exempel
<тип>	Indikerar typen av värdet.	<размер>
A && B	Värdena måste matas ut i angiven ordning.	<размер> && <цвет>
A | B	Indikerar att du bara behöver välja ett värde från de föreslagna (A eller B).	normal | små bokstäver
A || B	Varje värde kan användas självständigt eller tillsammans med andra i valfri ordning.	bredd || räkna
	Grupper värderingar.	[ gröda || korsa ]
*	Upprepa noll eller fler gånger.	[,<время>]*
+	Upprepa en eller flera gånger.	<число>+
?	Den angivna typen, ordet eller gruppen är valfri.	infälld?
(A, B)	Upprepa minst A, men inte mer än B gånger.	<радиус>{1,4}
#	Upprepa en eller flera gånger åtskilda med kommatecken.	<время>#

×

Värderingar

klipp Texten klipps så att den passar området. ellips Texten trunkeras och en ellips läggs till i slutet av raden.

Exempel

Magnetfältet dämpar försumbart himmelsfärens storcirkel, i vilket fall banornas excentriciteter och lutningar ökar.

Resultat detta exempel visas i fig. 1.

Ris. 1. Ellips i slutet av texten

Objektmodell

Ett objekt.style.textOverflow

Notera

Opera före version 11 använder egenskapen -o-text-overflow.

Specifikation

Varje specifikation går igenom flera stadier av godkännande.

• Rekommendation - Specifikationen har godkänts av W3C och rekommenderas som standard.
• Kandidatrekommendation ( Möjlig rekommendation) - gruppen som ansvarar för standarden är övertygad om att den uppfyller sina mål, men kräver hjälp från utvecklingsgemenskapen för att implementera standarden.
• Föreslagen rekommendation Föreslagen rekommendation) - i detta skede skickas dokumentet till W3C:s rådgivande råd för slutgiltigt godkännande.
• Working Draft - En mer mogen version av ett utkast som har diskuterats och ändrats för granskning av samhället.
• Redaktörens utkast ( Redaktionellt utkast) - ett utkast till standarden efter ändringar som gjorts av projektredaktörerna.
• Utkast ( Utkast till specifikation) - det första utkastet till standarden.

×