De introductie van CSS3 brengt revolutionaire veranderingen met zich mee in de dagelijkse routine van webontwerpers. CSS3 blijft ons elke dag verbazen. Dingen die voorheen alleen met javascript konden worden gedaan, zijn nu eenvoudig te doen met CSS3. Bijvoorbeeld de eigenschap Text-Overflow.
Soms moeten we tijdens het maken van websites een deel van de dynamische tekst verbergen zonder naar de volgende regel te gaan. Dat wil zeggen, lange tekst invoegen in een tabel met een vaste breedte. Tegelijkertijd is het nodig om de gebruiker te laten zien dat het zichtbare deel van de tekst niet alles is. Er is ook een verborgen gedeelte. Dit kan worden weergegeven met behulp van een weglatingsteken (...).
Met CSS3 kunnen we dit eenvoudig doen met behulp van de CSS-text-overflow-eigenschap
Markering
Tekstoverloop: weglatingsteken;
Betekenis ellips Hiermee kunt u een weglatingsteken toevoegen na de tekst (...)
De eigenschap text-overflow: ellips is handig wanneer:
1. Tekst reikt verder dan de cel
2. Er is vrije ruimte in de cel: nowrap.
We hebben een div met een breedte van 150 pixels om de namen van bedrijven uit de database weer te geven. Maar tegelijkertijd willen we niet dat lange bedrijfsnamen naar een nieuwe regel springen en het uiterlijk van de tafel bederven. Dat wil zeggen dat we tekst moeten verbergen die groter is dan 150 pixels. Ook wij willen de gebruiker hierover informeren. Hij bedoelt dus dat niet de gehele titel wordt weergegeven. En we willen dat alle tekst wordt weergegeven wanneer de muis beweegt.
Laten we eens kijken hoe we dit kunnen doen met CSS3.
Bedrijfswrap ul li (
tekstoverloop: weglatingsteken;
overloop: verborgen;
witruimte: nuwrap; )
- Bedrijfsnaam
- Investnet-vermogensbeheer
- Russell Investeringen
- Noordwestelijk wederzijds financieel netwerk
- ING Financiële Netwerken
Browser-ondersteuning
Met ondersteuning door browsers heeft deze eigenschap één kleine nuance. Alles behalve Firefox wordt perfect correct weergegeven. Maar gelukkig is er een oplossing voor dit probleem!
Drie puntjes in Firefox
Helaas ondersteunt Gecko (de weergave-engine in Firefox) deze eigenschap niet. Deze browser ondersteunt echter XBL, met behulp waarvan we uit deze situatie zullen komen.
Gecko is een gratis webpagina-indelingsengine voor Mozilla Firefox, Netscape en andere browsers. Oude namen zijn "Raptor" en "NGLayout". Het kernconcept van Gecko is het ondersteunen van open webstandaarden zoals HTML, CSS, W3C DOM, XML 1.0 en JavaScript. Een ander concept is platformonafhankelijk. Tegenwoordig draait Gecko op Linux, Mac OS X, FreeBSD en Microsoft Windows besturingssystemen, evenals Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga en anderen.
Om ellipsen in Firefox weer te geven, moeten we één regel aan het stijlblad toevoegen.
als u de eigenschap wilt uitschakelen, voegt u gewoon het volgende toe:
Moz-binding: url("bindings.xml#none");
De volgende stap is het maken van een bindings.xml-bestand op dezelfde locatie waar het stylesheet is opgeslagen. We kunnen hiervoor elke teksteditor gebruiken! Kopieer de onderstaande code en geef het bestand de naam bindings.xml.
document.getAnonymousNodes(dit)[ 0 ]
deze.label.stijl
deze.stijl.weergave
if(deze.stijl.display != waarde) deze.stijl.display= waarde
deze.label.waarde
if(dit.label.waarde != waarde) dit.label.waarde= waarde
var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.lengte - 1 ]) strings.pop()
this.value= strings.join(" ")
this.display= strings.lengte? "" : "geen"
deze.update()
deze.update()
Definitieve code voor alle browsers
Bedrijfswrap ul li (
tekstoverloop: weglatingsteken;
-o-tekst-overloop: weglatingsteken;
-moz-binding: url("bindings.xml#ellipsis");
witruimte: nowrap;
overloop: verborgen;
}
CSS3 wordt de go-to tool voor webontwerpers over de hele wereld om nog nooit eerder vertoonde websites te maken met minimale code. Er zijn eenvoudige, letterlijk éénregelige oplossingen die voorheen alleen mogelijk waren met Photoshop of javascript. Begin vandaag nog met het leren van de kracht van CSS3 en HTML5 en u zult er geen spijt van krijgen!
Om zich te onderscheiden van de grijze massa van vertalers en uw sympathie te winnen, beste lezers, zullen er aan het einde van mijn lessen wijze gedachten en aforismen zijn. Iedereen zal iets van zichzelf vinden in deze lijnen :)
Verdraag met waardigheid wat je niet kunt veranderen.
Vlad Merzjevitsj
Ondanks het feit dat grote diagonale monitoren steeds betaalbaarder worden en hun resolutie voortdurend toeneemt, ontstaat er soms de opgave om veel tekst in een beperkte ruimte te passen. Dit kan bijvoorbeeld nodig zijn voor een mobiele versie van de site of voor een interface waarbij het aantal regels belangrijk is. In dergelijke gevallen is het zinvol om lange regels tekst in te korten, zodat alleen het begin van de zin overblijft. Op deze manier brengen we de interface naar een compacte vorm en verminderen we de hoeveelheid weergegeven informatie. Het inkorten van de regels zelf kan aan de serverzijde worden gedaan met behulp van dezelfde PHP, maar het is eenvoudiger via CSS en u kunt bijvoorbeeld altijd de volledige tekst weergeven als u er met de muisaanwijzer overheen beweegt. Vervolgens bekijken we methoden voor het knippen van tekst met een denkbeeldige schaar.
In werkelijkheid komt het allemaal neer op het gebruik van de overflow-eigenschap met de waarde verborgen . De verschillen liggen alleen in de verschillende weergave van onze tekst.
Overloop gebruikenOm ervoor te zorgen dat de overflow-eigenschap zichzelf met tekst in al zijn glorie laat zien, moet je de tekst uitpakken met witruimte met de waarde nowrap . Als dit niet gebeurt, zal het gewenste effect niet optreden; er worden koppeltekens aan de tekst toegevoegd en de volledige tekst wordt weergegeven. Voorbeeld 1 laat zien hoe u lange tekst kunt inkorten met een opgegeven set stijleigenschappen.
Voorbeeld 1. overloop voor tekst
HTML5 CSS3 IE Cr Op Sa Fx
Tekst .size ( witruimte: nowrap; /* Tekstterugloop annuleren */ overloop: verborgen; /* Inhoud bijsnijden */ achtergrond: #fc0; /* Achtergrondkleur */ opvulling: 5px; /* Marges */ )
Het resultaat van dit voorbeeld wordt getoond in Fig. 1.
Rijst. 1. Het uiterlijk van de tekst na het toepassen van de overflow-eigenschap
Zoals uit de figuur blijkt, is er over het algemeen één nadeel: het is niet duidelijk dat de tekst een vervolg heeft, dus de gebruiker moet hiervan op de hoogte worden gesteld. Dit wordt meestal gedaan met behulp van een verloop of ellips.
Een verloop aan tekst toevoegenOm duidelijker te maken dat de tekst aan de rechterkant niet ophoudt, kunt u er een verloop van een transparante kleur naar de achtergrondkleur overheen leggen (Fig. 2). Dit zal het effect creëren van een geleidelijke ontbinding van de tekst.
Rijst. 2. Verlooptekst
Voorbeeld 2 laat zien hoe u dit effect kunt creëren. De stijl van het element zelf blijft vrijwel hetzelfde, maar we zullen het verloop zelf toevoegen met behulp van het ::after pseudo-element en CSS3. Om dit te doen, voegen we een leeg pseudo-element in via de content-eigenschap en passen we er een verloop op toe met verschillende voorvoegsels voor grote browsers (voorbeeld 2). De breedte van het verloop kan eenvoudig worden gewijzigd met breedte. U kunt ook de mate van transparantie aanpassen door de waarde 0,2 te vervangen door uw eigen waarde.
Voorbeeld 2: Verloop over tekst
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Tekst .size ( witruimte: nowrap; /* Tekstterugloop annuleren */ overloop: verborgen; /* Inhoud bijsnijden */ opvulling: 5px; /* Marges */ achtergrond: #fc0; /* Achtergrondkleur */ positie: relatief ; /* Relatieve positionering */ ) .size::after ( inhoud: ""; /* Toon het element */ position: absoluut; /* Absolute positionering */ rechts: 0; top: 0; /* Positie van het element */ breedte: 40px; /* Verloopbreedte*/ hoogte: 100%; /* Bovenliggende hoogte */ /* Verloop */ achtergrond: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); achtergrond: -webkit-lineair verloop (links, rgba (255.204,0, 0,2), #fc0 100%); achtergrond: -o-lineair verloop (links, rgba (255.204,0, 0,2), #fc0 100%); achtergrond: -ms-lineair verloop (links, rgba (255.204,0, 0,2), #fc0 100%) achtergrond: lineair verloop (naar rechts, rgba (255.204,0, 0,2), #fc0 100 %);
Een intra-discrete arpeggio transformeert een polyserie; dit is een eenmalige verticaal in een super polyfonisch weefsel.
Deze methode werkt niet in Internet Explorer tot en met versie 8.0, omdat deze geen gradiënten ondersteunt. Maar je kunt CSS3 achterwege laten en op de ouderwetse manier een verloop maken, via een afbeelding in PNG-24-formaat.
Deze methode kan alleen worden gecombineerd met een effen achtergrond, en in het geval van een achtergrondafbeelding zal het verloop bovenop de tekst merkbaar zijn.
Ellipsis aan het einde van de tekstU kunt ook een weglatingsteken gebruiken aan het einde van bijgesneden tekst in plaats van een verloop. Bovendien wordt het automatisch toegevoegd met behulp van de eigenschap text-overflow. Alle browsers begrijpen het, inclusief oudere versies van IE, en het enige nadeel van deze eigenschap is dat de status ervan momenteel onduidelijk is. CSS3 lijkt deze eigenschap te bevatten, maar de code ermee doorstaat de validatie niet.
Voorbeeld 3 toont het gebruik van de eigenschap text-overflow met de waarde-ellips, die een ellips toevoegt. Wanneer u met uw muis over de tekst beweegt, wordt deze in zijn geheel weergegeven en gemarkeerd in een achtergrondkleur.
Voorbeeld 3: Tekstoverloop gebruiken
HTML5 CSS3 IE Cr Op Sa Fx
Tekst .size ( witruimte: nowrap; /* Tekstterugloop annuleren */ overloop: verborgen; /* Inhoud bijsnijden */ opvulling: 5px; /* Marges */ tekstoverloop: ellips; /* Ellipsis */ ) .size :hover ( achtergrond: #f0f0f0; /* Achtergrondkleur */ witruimte: normaal; /* Normale tekstterugloop */ ) Het onbewuste veroorzaakt contrast, dit wordt door Lee Ross aangeduid als een fundamentele attributiefout, die te zien is in veel experimenten.
Het resultaat van dit voorbeeld wordt getoond in Fig. 3.
Rijst. 3. Tekst met weglatingstekens
Het grote voordeel van deze methoden is dat het verloop en de ellipsen niet worden weergegeven als de tekst kort is en volledig in een bepaald gebied past. De tekst wordt dus zoals gewoonlijk weergegeven wanneer deze volledig zichtbaar is op het scherm en wordt afgesneden wanneer de breedte van het element wordt verkleind.
Veel mensen zijn waarschijnlijk het probleem tegengekomen wanneer tekst op één regel moet worden weergegeven. Bovendien kan de tekst behoorlijk lang zijn en is de breedte van het blok waarin deze tekst zich bevindt doorgaans beperkt tot minimaal dezelfde grootte van het browservenster. Voor deze gevallen werd de eigenschap text-overflow uitgevonden, die was opgenomen in de CSS3-aanbeveling, en die voor het eerst werd geïmplementeerd in IE6, heel lang geleden. Wanneer u deze eigenschap voor een blok gebruikt en de tekst ervan breder is dan het blok zelf, wordt de tekst afgesneden en wordt er een weglatingsteken aan het einde geplaatst. Hoewel alles hier niet zo eenvoudig is, komen we hier later op terug.
Met Internet Explorer is alles duidelijk, hoe zit het met andere browsers? En hoewel de eigenschap text-overflow momenteel is uitgesloten van de CSS3-specificatie, ondersteunt Safari deze (tenminste in versie 3), en Opera ook (sinds versie 9, hoewel de eigenschap dat wel is). genaamd -o-overflow-text) Maar Firefox ondersteunt het niet, en zelfs in versie 3 niet. Het is triest, maar waar. Maar misschien kan er iets aan gedaan worden.
Natuurlijk kan het gedaan worden. Toen ik op internet zocht naar deze eigenschap en hoe ik dit in Firefox moest doen, kwam ik een eenvoudige oplossing tegen. De essentie van de oplossing:
Dat is alles. Lees het artikel voor meer informatie.
De oplossing is niet slecht, maar er zijn problemen:
Laten we ons eerst concentreren op het tweede probleem, namelijk hoe u kunt voorkomen dat het weglatingsteken wordt weergegeven wanneer dit niet nodig is. Nadat ik mijn hersens had gekweld en ‘een beetje’ had geëxperimenteerd, vond ik een oplossing. Ik zal het proberen uit te leggen.
Het punt is dat we een apart blok nodig hebben met een weglatingsteken dat alleen verschijnt als de tekst te veel ruimte in beslag neemt in de breedte. Toen kwam ik op het idee van een vallend drijvend blok. Hoewel het eng klinkt, betekent het gewoon een blok dat er altijd is en naar rechts is gedrukt, maar wanneer de breedte van de tekst groot wordt, duwt de tekst het blok naar de volgende regel.
Laten we verder gaan met oefenen, anders is het moeilijk uit te leggen. Laten we de HTML-structuur instellen:
Niet erg compact, maar kleiner kon ik niet doen. We hebben dus een blokcontainer DIV.ellipsis, een blok met onze tekst en een ander blok dat de ellips zal bevatten. Merk op dat het “ellipsblok” feitelijk leeg is, omdat we de extra drie punten niet nodig hebben wanneer we de tekst kopiëren. Wees ook niet ongerust over het gebrek aan extra klassen, aangezien deze structuur goed wordt aangepakt met behulp van CSS-selectors. En hier is de CSS zelf:
.ellipsis (overloop: verborgen; witruimte: nowrap; lijnhoogte: 1,2em; hoogte: 1,2em; rand: 1px effen rood; ) .ellipsis > DIV:eerste kind ( zwevend: links; ) .ellipsis > DIV + DIV ( zwevend: rechts; marge-boven: -1,2em; ).ellips >
Dat is alles. Wij controleren en zorgen ervoor dat het werkt zoals bedoeld in Firefox, Opera, Safari. In IE is er een heel vreemd, maar voorspelbaar resultaat. In IE6 is alles verdwenen, maar in IE7 werkt het simpelweg niet omdat het de gegenereerde inhoud niet ondersteunt. Maar op IE komen we later terug.
Laten we voor nu eens kijken naar wat we hebben gedaan. Eerst stellen we de regelhoogte en hoogte van het hoofdblok in, omdat we de hoogte van het blok en de hoogte van de tekstregel moeten weten. We stellen dezelfde waarde in voor de bovenkant van de marge van het blok met een weglatingsteken, maar met een negatieve waarde. Dus als het blok niet wordt "gereset" naar de volgende regel, zal het zich boven de tekstregel bevinden (één regel), wanneer het wordt gereset, zal het zich op zijn niveau bevinden (in feite is het lager, we trekken het gewoon weg één rij). Om onnodige zaken te verbergen, vooral als het niet nodig is om de ellips weer te geven, maken we overflow: verborgen voor het hoofdblok, dus als de ellips boven de lijn staat, wordt deze niet weergegeven. Hierdoor kunnen we ook tekst verwijderen die buiten het blok valt (tot aan de rechterrand). Om te voorkomen dat de tekst onverwachts doorloopt en het blok met de ellips steeds lager en lager duwt, maken we witruimte: nowrap, waardoor koppeltekens worden verboden - onze tekst zal altijd op één regel staan. Voor het blok met tekst stellen we float:left zo in dat het blok met de ellips niet onmiddellijk samenvouwt en de minimale breedte in beslag neemt. Omdat binnen het hoofdblok (DIV.ellipsis) beide blokken zweven (zwevend: links/rechts), zal het hoofdblok instorten als het tekstblok leeg is, dus voor het hoofdblok stellen we een vaste hoogte in (hoogte: 1,2em) . En ten slotte gebruiken we het ::after pseudo-element om het weglatingsteken weer te geven. Voor dit pseudo-element stellen we ook een achtergrond in om de tekst te bedekken die eronder zal verschijnen. We hebben een frame voor het hoofdblok geplaatst om de afmetingen van het blok te zien; later zullen we het verwijderen.
Als Firefox zowel pseudo-elementen als Opera en Safari zou ondersteunen wat betreft hun positionering (positie instellen/zweven enz.), dan zou het mogelijk zijn om geen apart blok voor ellipsen te gebruiken. Probeer de laatste drie regels te vervangen door het volgende:
in Opera en Safari werkt alles zoals voorheen, en zonder het extra ellipsblok. Maar Firefox is teleurstellend. Maar het is voor hem dat wij de beslissing nemen. Nou, je zult het moeten doen met de originele HTML-structuur, stap twee
Zoals je misschien hebt gemerkt, hebben we het probleem van de ellipsen die verschijnen als de tekst in een blok past, opgelost. We hebben echter nog een probleem: de tekst wordt in het midden van de letters afgesneden. En bovendien werkt het niet in IE. Om beide te ondervangen, moet u de native text-overflow-regel voor browsers gebruiken, en alleen voor Firefox de hierboven beschreven oplossing gebruiken (er is geen alternatief). We zullen later uitzoeken hoe we een “Firefox-only” oplossing kunnen maken, maar laten we nu proberen om wat we hebben te laten werken met behulp van tekst-overflow. Laten we de CSS aanpassen:
Het bleek dat er niet veel te bewerken valt. Er zijn drie lijnen toegevoegd aan de hoofdblokstijl. Twee daarvan bevatten tekstoverloop. Het instellen van de breedte op 100% is nodig voor IE, zodat de tekst het blok niet tot oneindig uitbreidt en de eigenschap text-overflow werkt; in wezen hebben we de breedte beperkt. In theorie strekt DIV zich, net als alle blokelementen, uit over de gehele breedte van de container, en breedte: 100% is nutteloos en zelfs schadelijk, maar IE heeft een probleem met de lay-out, omdat de container zich altijd uitstrekt om in de inhoud te passen, dus er is geen andere manier. We hebben ook alle interne elementen inline gemaakt, omdat voor sommige browsers (Safari en Opera) text-overflow anders niet werkt, omdat er blokelementen in zitten. We hebben de laatste drie regels becommentarieerd, omdat ze in dit geval niet nodig zijn en alles overtreden (conflict). Deze regels zijn alleen nodig voor Firefox.
Laten we kijken wat we hebben en doorgaan.
Stap drie
Toen ik opnieuw naar de pagina keek (voordat ik dit artikel ging schrijven) die aan het begin werd genoemd, keek ik uit nieuwsgierigheid door de commentaren op zoek naar slimme, gerelateerde ideeën. En ik vond het in een opmerking waarin werd gesproken over een andere oplossing die werkt in Firefox en IE (voor deze persoon, net als voor de auteur van het eerste artikel, zijn er blijkbaar geen andere browsers). In deze oplossing gaat de auteur dus op een iets andere manier met dit fenomeen (de afwezigheid van tekst-overflow) om, door handlers aan de overflow- en underflow-gebeurtenissen te koppelen aan elementen waarvoor het nodig was om indien nodig een weglatingsteken te plaatsen. Niet slecht, maar het lijkt mij dat deze oplossing erg duur is (in termen van middelen), vooral omdat deze enigszins glitchy is. Toen hij echter uitvond hoe hij dit voor elkaar kreeg, kwam hij iets interessants tegen, namelijk de CSS-eigenschap -moz-binding. Voor zover ik het begrijp is dit analoog aan het gedrag in IE, alleen met een andere saus en koeler. Maar we zullen niet in details treden, laten we zeggen dat je op deze manier een JavaScript-handler aan een element kunt koppelen met behulp van CSS. Het klinkt vreemd, maar het werkt. Wat wij doen:
Zoals je kunt zien, hebben we opnieuw niet veel wijzigingen aangebracht. Bij deze stap in IE7 is er een vreemde storing: alles staat scheef als je de zoom niet instelt: 1 voor het hoofdblok (de eenvoudigste optie). Als u de regel .ellipsis * of .moz-ellipsis > DIV + DIV verwijdert (wat helemaal geen invloed heeft op IE7), verdwijnt de glitch. Dit is allemaal vreemd. Als iemand weet wat er aan de hand is, laat het me weten. Voorlopig doen we het met zoom: 1 en gaan we verder met Firefox.
De eigenschap -moz-binding omvat het bestand moz_fix.xml met een instructie met het identificatieweglatingsteken. De inhoud van dit XML-bestand is als volgt:
Het enige wat deze constructor doet is de klasse moz-ellipsis toevoegen aan het element waarvoor de selector werkte. Dit werkt alleen in Firefox (gekko-browsers?), dus alleen daarin wordt de moz-ellipsis-klasse aan de elementen toegevoegd, en we kunnen aanvullende regels voor deze klasse toevoegen. Dat is wat ze wilden. Ik ben er niet helemaal zeker van of dit nodig is.style.mozBinding = “”, maar uit ervaring met expressie is het beter om aan de veilige kant te blijven (over het algemeen ben ik niet erg bekend met deze kant van Firefox, dus Ik kan me vergissen).
Het kan zijn dat u zich zorgen maakt dat deze techniek een extern bestand en JavaScript in het algemeen gebruikt. Het is niet nodig om bang te zijn. Ten eerste: als het bestand niet wordt geladen en/of JavaScript is uitgeschakeld en niet werkt, is dat geen probleem. De gebruiker ziet het weglatingsteken aan het einde gewoon niet, de tekst wordt aan het einde van het blok afgebroken. Dat wil zeggen, in dit geval krijgen we een "onopvallende" oplossing. Je kunt het zelf zien.
We hebben dus een stijl voor de “Big Four”-browsers, die tekstoverloop voor Opera, Safari en IE implementeert en deze emuleert voor Firefox, niet zo goed, maar het is beter dan niets
We zouden hier een einde aan kunnen maken, maar we willen onze oplossing graag een beetje verbeteren. Omdat we een constructor aan elk blok kunnen koppelen en er dus controle over kunnen krijgen, waarom zouden we hier niet van profiteren? Laten we onze structuur vereenvoudigen:
O ja! Ik denk dat je het met me eens zult zijn: dit is wat je nodig hebt!
Laten we nu alle onnodige dingen uit de stijl verwijderen:
.ellipsis ( overflow: verborgen; witruimte: nowrap; regelhoogte: 1,2em; hoogte: 1,2em; tekst-overflow: ellips; -o-text-overflow: ellips; breedte: 100%; -moz-binding: url(moz_fix.xml#ellipsis); .moz-ellipsis > DIV:eerste kind ( zwevend: links; ) .moz-ellipsis > DIV + DIV ( zwevend: rechts; marge-boven: -1.2em; ) .moz - ellips > DIV + DIV::after (achtergrondkleur: wit; inhoud: "..."; )
We hebben eindelijk de rode rand verwijderd :)
Laten we nu iets toevoegen aan onze moz_fix.xml:
Wat is hier aan de hand? We herscheppen onze oorspronkelijke HTML-structuur. Dat wil zeggen dat deze problemen met blokken automatisch worden opgelost, en alleen in Firefox. JavaScript-code is geschreven in de beste tradities :)
Helaas kunnen we de situatie niet vermijden waarin de tekst midden in de brief wordt afgebroken (hoewel misschien tijdelijk, omdat mijn oplossing nog steeds erg grof is en in de toekomst misschien wel werkt). Maar we kunnen dit effect een beetje verzachten. Om dit te doen hebben we een afbeelding nodig (een witte achtergrond met een transparant verloop) en een paar wijzigingen in de stijl:
.moz-ellipsis > DIV:eerste kind ( zwevend: links; marge-rechts: -26px; ) .moz-ellipsis > DIV + DIV ( zwevend: rechts; marge-boven: -1.2em; achtergrond: url(ellipsis. png) herhaal-y; opvulling links: 26px )
Laten we kijken en genieten van het leven.
Laten we hier een einde aan maken
Ik zal u een klein voorbeeld geven van de lay-out van derden. Ik heb de inhoudsopgave van een van de Wikipedia-pagina's genomen (de eerste die naar voren kwam) en daarop de hierboven beschreven methode toegepast.
Over het algemeen kan deze oplossing alleen met enige rek universeel worden genoemd. Het hangt allemaal af van uw lay-out en de complexiteit ervan. Mogelijk heb je een vijl nodig, of misschien een tamboerijn. Hoewel ik denk dat het in de meeste gevallen wel zal werken. En dan heb je nu een startpunt ;)
Ik hoop dat je iets interessants en nuttigs uit het artikel hebt geleerd;) Leer, experimenteer, deel.
Succes!
Hoe soms vervelend zijn lange namen van productlinks (elk drie regels) of lange koppen van andere blokken. Hoe geweldig zou het zijn als dit hele gebeuren op de een of andere manier kon worden beperkt en compacter gemaakt. En als u er met de muis overheen beweegt, wordt de titel volledig weergegeven.
Hiervoor komt onze favoriete CSS ons te hulp. Het is heel eenvoudig, kijk.
Laten we zeggen dat we een blok als dit uit een productcatalogus hebben:
Hier is de structuur:
Miracle Yudo avondkrachtgever, mysterieus, kunst. 20255-59
Een prachtig product voor een superprijs, slechts 100 roebel. Het zal je eenzame avonden opvrolijken en je een boost van vitaliteit geven!
Dit zijn zijn stijlen:
Someblock(rand: 1px effen #cccccc; marge: 15px auto; opvulling: 10px; breedte: 250px; ) .header(rand-onder: 1px onderbroken; lettergrootte: 16px; lettertype-gewicht: vet; marge-onder: 12px ;)
Mee eens, het ziet er verschrikkelijk uit. Uiteraard kunt u de productnaam inkorten. Maar wat als het er honderden of duizenden zijn? Je kunt PHP ook gebruiken om een deel van de naam af te snijden en deze te beperken tot een bepaald aantal tekens. Maar wat als de lay-out later verandert en de blokken kleiner zijn of juist 2-3 keer groter? Niets van dit alles is een optie, niets van dit alles past bij ons.
En hier komt CSS en zijn magische tekst-overflow-eigenschap ons te hulp. Maar het moet correct worden gebruikt in combinatie met verschillende andere eigenschappen. Hieronder laat ik je een kant-en-klare oplossing zien, waarna ik je uitleg wat wat is.
Dus afgezien van het handmatig bewerken van productnamen en het programmatisch bijsnijden van stijlen, nemen we CSS in handen en zien we wat we krijgen:
Miracle Yudo avondkrachtgever, mysterieus, kunst. 20255-59
Een prachtig product voor een superprijs, slechts 100 roebel. Het zal je eenzame avonden opvrolijken en je een boost van vitaliteit geven!
Nou, is het beter? Volgens mij heel erg! En beweeg je muis over de titel... voila! Hier wordt het ons volledig getoond.
Er is niets veranderd in onze structuur, ik heb zojuist een div toegevoegd met de klasse .header en de title-tag. En hier zijn de nieuwe, bijgewerkte stijlen:
Someblock(rand: 1px effen #cccccc; marge: 15px auto; opvulling: 10px; breedte: 250px; ) .header(rand-onder: 1px onderbroken; lettergrootte: 16px; lettertype-gewicht: vet; marge-onder: 12px ; overloop: verborgen; tekstoverloop: weglatingsteken;
Kijk wat we deden:
- We hebben de eigenschap white-space: nowrap aan het blok toegevoegd, waardoor de tekst niet meer woorden op een nieuwe regel kan plaatsen, waardoor deze wordt uitgerekt tot een regel;
- Vervolgens hebben we de overflow toegevoegd: verborgen eigenschap, die de zichtbaarheid van onze lijn beperkte tot de breedte van het blok, waardoor al het overtollige werd afgesneden en niet aan de bezoeker werd getoond;
- Welnu, aan het einde hebben we een weglatingsteken aan onze regel toegevoegd met behulp van de text-overflow:ellipsis-eigenschap, waardoor de bezoeker weet dat dit niet het einde van de regel is, en dat ze waarschijnlijk hun muis moeten bewegen en ernaar moeten kijken in vol.
Houd van CSS, leer CSS, en het bouwen van websites zal je niet zo moeilijk lijken =)
