Home-theater-designers
Lange teksten kunnen oncontroleerbaar lijken tijdens webdesign. Maar ze kunnen ook onvermijdelijk zijn en soms steken ze de grens over. Hierdoor kan een los Document Object Model (DOM) ontstaan met een onnodige overloop die niet gebruiksvriendelijk is.
Maar hier is het goede nieuws: je kunt zulke lange teksten afhandelen door ze met CSS op een nieuwe regel te plaatsen. Hier laten we u zien hoe u lange, ononderbroken teksten kunt omwikkelen met CSS.
Hoe CSS-tekstomloop werkt
CSS verwerkt uitgerekte lange woorden met behulp van de ingebouwde woordomslag of overloop-wrap eigendom.
spelletjes om met vrienden te spelen tijdens het sms'en
Als ze echter niet worden beheerd, verwerken browsers dergelijke lange teksten standaard. Ze zullen geen lange woorden inpakken totdat ze de instructie hebben gekregen om dit te doen.
Gerelateerd: Wat u moet weten over de DOM
De twee belangrijkste CSS-eigenschappen die eerder zijn genoemd, werken op dezelfde manier en u kunt ze door elkaar gebruiken. Ze accepteren echter vier waarden of syntaxis:
- breekwoord : Dit is de eigenlijke CSS-syntaxis die de browser vertelt om een lange tekst naar een nieuwe regel te laten lopen.
- normaal : Het breekt elk woord op de normale scheidingspunten binnen een DOM. Het heeft geen effect op lange snaren.
- voorletter : Dit is de standaard browser manier om met strings om te gaan. Zoals de normaal syntaxis, het breekt geen lange woorden.
- erven : Het vertelt het onderliggende element om de eigenschap van zijn ouder te erven. Maar het werkt nog steeds niet met lange teksten, behalve dat je solliciteert breekwoord naar het ouderelement.
Lange woorden inpakken met CSS Word Wrap
Woorden overzetten naar een nieuwe regel met CSS is eenvoudig en vereist geen omslachtige CSS-tweaks om te werken.
Bijvoorbeeld de lange h2 tekst in de tekstcontainer in de onderstaande voorbeeldafbeelding overschrijdt de grenslijn:
Laten we eens kijken hoe we het op de volgende regel kunnen wikkelen met de woordomslag CSS-eigenschap:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
Na het inpakken van de lange h2 tekst in de voorbeeldafbeelding, hier is de uitvoer:
Dat is het! U weet nu hoe u met CSS woorden op een nieuwe regel in uw DOM kunt plaatsen.
waarom wordt mijn e-mail niet bijgewerkt op mijn Android?
Gerelateerd: Een deel van een webpagina targeten met CSS-kiezers
Echter, zoals eerder vermeld, woordomslag en overloop-wrap werk op dezelfde manier en accepteer vergelijkbare eigenschappen.
Gebruiken overloop-wrap vervang in plaats daarvan gewoon woordomslag ermee.
Het is belangrijk om woorden op een webpagina te plaatsen
Naast het toevoegen van meer esthetiek aan uw webpagina, comprimeert tekstterugloop de DOM. Zelfs als u bepaalt wat er in uw inhoudsgedeelte komt, kunnen gebruikers links of andere woorden plaatsen die niet in uw tekstcontainer of uw hele DOM passen.
Daarom is het toepassen van tekstomloop op een dergelijke sectie noodzakelijk om de DOM intact te houden.
hoe een tekstoverzicht toe te voegen in photoshopDeel Deel Tweeten E-mail Mediaquery's in HTML en CSS gebruiken om responsieve websites te maken
Wilt u uw website er fantastisch uit laten zien op mobiele apparaten? Het is tijd om te leren hoe u mediaquery's in CSS kunt gebruiken.
Lees volgende Gerelateerde onderwerpen- Programmeren
- CSS
- Documentobjectmodel
Idowu is gepassioneerd door alles wat slimme technologie en productiviteit betreft. In zijn vrije tijd speelt hij met coderen en schakelt hij over naar het schaakbord als hij zich verveelt, maar hij vindt het ook heerlijk om af en toe uit de routine te stappen. Zijn passie om mensen de weg te wijzen in moderne technologie motiveert hem om meer te schrijven.
Meer van Idowu OmisolaAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren