Bij het maken van lay-outs hebben webmasters regelmatig een vraag: hoe wordt de tekst overgedragen? In de meeste gevallen voert de browser deze taak zelf uit. Maar soms moet dit proces onder controle worden gehouden, vooral bij het opmaken van lange woorden en zinsdelen die, als ze verkeerd worden vertaald, hun betekenis verliezen.

word-wrap-eigenschap

In HTML is er een speciale tag om regels te scheiden
. Maar het te frequente gebruik ervan wordt door ontwikkelaars als slechte manieren beschouwd en duidt vaak op onprofessioneel gedrag. Stel je als bewijs voor dat je een logo hebt en dat elke letter op een nieuwe regel moet beginnen:

Het resultaat is omslachtige en lelijke code die bij elke ontwikkelaar een cultuurschok zal veroorzaken. En wat moet je doen als je het logo horizontaal wilt plaatsen op de desktopversie, en verticaal als de schermbreedte kleiner is dan 550 pixels? Gebruik daarom altijd Cascading Style Sheets om het uiterlijk van elementen aan te passen. Bovendien worden regeleinden met behulp van CSS-tools op een elegantere manier uitgevoerd. In dit geval is er geen sprake van redundante opmaak, waardoor de laadsnelheid van de pagina alleen maar afneemt.

De eerste eigenschap die u moet gebruiken voor tekstverwerking is tekstomloop. Accepteert drie waarden: normaal, alles kapot en alles behouden. Om te kunnen werken hoef je alleen maar alles te onthouden. Normaal is de standaardwaarde en het heeft geen zin dit op te geven. Keep-all betekent dat regeleinden in een CSS-document worden voorkomen. Speciaal ontworpen voor Chinese, Japanse en Koreaanse karakters. Als u dus niet in een van deze talen gaat bloggen, zal de eigenschap niet nuttig voor u zijn. Het wordt ook niet ondersteund door de Safari-browser en iOS-mobiele telefoons.

Om elke letter aan een nieuwe regel toe te wijzen met behulp van CSS voor het logo uit het vorige voorbeeld, moet je de volgende code schrijven:

P( lettertype: vet 30px Helvetica, schreefloos; breedte: 25px; woordomloop: alles breken; )

De breedte en grootte van het lettertype zijn zo gekozen dat er voldoende ruimte is voor slechts één letter. Woordafbreking met de waarde break-all vertelt de browser dat het woord elke keer op een nieuwe regel moet worden afgebroken. Deze eigenschap kan niet onvervangbaar worden genoemd. Maar het is handig bij het ontwerpen van kleine tekstblokken, zoals velden voor het invoeren van opmerkingen.

witruimte-eigenschap

Een veel voorkomende fout die nieuwe webontwikkelaars maken, is dat ze tekst proberen te bewerken met spaties of Enter-toetsen, en zich vervolgens afvragen waarom hun inspanningen niet op de pagina verschijnen. Hoe vaak u ook op Enter drukt, de browser zal dit negeren. Maar er is een manier om de tekst op de gewenste manier weer te geven, rekening houdend met alle spaties.

In een CSS-document kunnen regeleinden die zijn toegewezen met behulp van de witruimte-eigenschap worden geconfigureerd om spaties of Enter-toetsaanslagen te respecteren. Witruimte met de waarde pre-line dwingt de browser om Enter in de tekst te zien.

Als u in uw CSS-code pre-line wijzigt in pre-wrap, houdt de regelomloop rekening met witruimte. En andersom: voorkom terugloop door de tekst een witruimte-eigenschap toe te wijzen met de waarde nowrap:

#wrapper p( kleur: #FFF; opvulling: 10px; lettertype: vet 16px Helvetica, schreefloos; witruimte: nowrap; )

Tekst-overloop

Een ander handig hulpmiddel voor het werken met tekst is text-overflow. Naast regeleinden kunt u met de CSS-eigenschap de inhoud bijsnijden wanneer de container vol is. Neemt twee waarden aan:

• clip - snijdt eenvoudigweg de tekst bij;
• ellips - voegt een ellips toe.

#wrapper p( kleur: #FFF; opvulling: 10px; lettertype: vet 16px Helvetica, sans-serif; tekstoverloop: ellipsis; /*Voeg een ellips toe*/ witruimte: nowrap; /* Regelterugloop uitschakelen */ overflow : verborgen;/*Verberg alles wat verder gaat dan de container*/ )

Om de eigenschap te laten werken, moet het element ook worden ingesteld om regeleinden en overloop te verbieden terwijl de waarde verborgen is.

Les 5.

In deze les:
1. Laten we kijken hoe we de html-code handiger en gemakkelijker leesbaar voor ons kunnen maken.
2. Laten we eens kijken hoe u een tekstregel correct kunt laten doorlopen.

De html-code handig maken.

Nu is onze code duidelijk en gemakkelijk te lezen, omdat er weinig tekst en vrijwel geen tags zijn. Wanneer we een complexere pagina maken, zullen er veel tags zijn, dus het zal moeilijk zijn om de juiste te vinden.

Om een ​​warboel aan tags te voorkomen, moet u tags en lijnen in eerste instantie zo rangschikken dat ze visueel gemakkelijker waar te nemen zijn. Wanneer de browser informatie van een HTML-pagina leest, maakt het niet uit hoeveel spaties of lege regels er in de code staan.

Ik heb de tekst in de paginacode gewijzigd ten opzichte van de tekst die we hebben gemaakt, maar dat maakt niet uit. De linker- en rechterafbeelding tonen dezelfde code. Beide opties worden door de browser precies hetzelfde op het beeldscherm weergegeven. Mee eens, het werken met de code aan de rechterkant zal veel gemakkelijker zijn dan met de code aan de linkerkant.

De code waar we naar kijken is heel eenvoudig, maar zelfs nu is het verschil in visuele perceptie merkbaar. Er zijn geen specifieke regels om "de zaken op orde te brengen"; elke meester beslist zelf hoe het voor hem handiger is om te werken.

HTML-regeleinde. Tag <br>.

Let op de afbeelding. In de eerste versie is de tekst in één regel geschreven, in de tweede versie in twee regels.

De browser geeft beide opties hetzelfde weer. De tekst wordt op één regel geschreven:

Je vraagt ​​waarom is dit? In een van de codes wordt namelijk een deel van de tekst naar een andere regel verplaatst. Het zou logisch zijn als in de browser een deel van de tekst ook naar een andere regel zou worden verplaatst, maar html heeft wat dit betreft zijn eigen logica. Als we een regeleinde maken in de html-code, dan komt dit voor de browser overeen met één spatie(zoals een gewone spatie tussen woorden in tekst). Als we een deel van de tekst niet één regel naar beneden verplaatsen, maar 2 of 3 (willekeurig aantal), dan beschouwt de browser deze afstand nog steeds als één reguliere spatie tussen woorden en wanneer deze op het scherm wordt weergegeven, wordt de tekst in één regel geschreven .

Tag <br>

Toen we in de derde les kennis maakten met tags, zei ik dat er tags zijn die niet hoeven te worden gesloten. Label <br> een ervan wordt gebruikt voor regeleinden.
Laten we het in code toepassen:

We hebben een tag ingevoegd <br> in onze html-code en wanneer u het bestand nu via de browser start, wordt een deel van de tekst overgebracht naar de volgende regel.
* Vergeet niet de wijzigingen op te slaan in Kladblok (Ctrl + S) en de pagina in de browser te vernieuwen (F5).

Bepaal hoe lange woorden moeten worden verpakt:

1. alleen als er een streepje, spatie of Enter staat (excl. vaste spatie en vast koppelteken ‑). Tussen delen van één woord wordt een koppelteken geschreven (bijvoorbeeld rood-geel) en tussen woorden een streepje. "Zacht koppelteken" - verschijnt alleen wanneer een overdracht noodzakelijk is. Als het woord verder gaat dan de ouder, dan of draagt ​​zijn deel over zonder lijn. Wiskundige uitdrukkingen gebruiken een minteken (bijvoorbeeld 5 − 2). Telefoonnummers worden weergegeven in een cijferbalk (bijvoorbeeld +7 800 000‒00‒00). En dit alles is niet hetzelfde bekende ding dat op het toetsenbord staat.
2. na welk karakter dan ook.
3. volgens de regels van de Russische taal met automatisch gebruik van een koppelteken.

overloop-wikkel
woordomslag
woordbreuk
lijnbreuk
koppeltekens

onze negentienhonderdnegenennegentig kilogram is al opnieuw gekeurd ontworteler-bulldozer-lader

Wat is het verschil tussen de ene woning en de andere?

Standaard worden lange woorden niet afgebroken, tenzij expliciet aangegeven door een koppelteken, en beginnen ze op een nieuwe regel.

Om streepjes te negeren die direct zichtbaar zijn voor het oog, voegen we woord-break toe: keep-all; .

Om te voorkomen dat de browser aandacht besteedt aan het zachte koppelteken, voegt u koppeltekens in: geen; .

Als woordterugloop vereist is, dan wordt woordomloop: break-word; Ik raad je aan om het altijd te gebruiken, omdat het door alle browsers wordt begrepen. Het is anders dan woord-break: break-all; , die prioriteit heeft omdat woorden die niet in het blok passen, op een nieuwe regel beginnen en er rekening wordt gehouden met de aanbeveling voor een zacht koppelteken.

Wanneer samen gebruikt word-break: break-all; met koppeltekens: auto; , dit laatste wordt genegeerd. koppeltekens: auto; Plaatst eventuele koppeltekens naar eigen goeddunken. Maar om het te laten werken, moet u uw taal aangeven door het lang="ru" attribuut in de div op te geven.

Plaats geen woorden op een andere regel

Laten we zeggen dat een menu-item of knop er niet goed uitziet als deze uit elkaar valt. Daarom moet hun scheiding verboden worden. Om dit te doen, moeten alle bovenstaande eigenschappen in de “standaard” modus worden gezet en toegevoegd. Klik verder en bekijk ons ​​oefenterrein.

Controle van woordomloop met koppeltekens: auto;

Tetrahydropyranylcyclopentyltetrahydropyridopyridine

CSS3-tekst Bevat teksteigenschappen om problemen met tekstomloop en het bijsnijden van tekst in inhoud op te lossen.

CSS3-eigenschappen voor tekstopmaak

1. De tekstoverlooplijn bijsnijden

Met deze eigenschap kunt u de lengte van de tekst beperken wanneer deze niet in de container past, door deze visueel af te snijden of weer te geven met ellipsen. De eigenschap werkt alleen als aan de volgende voorwaarden wordt voldaan: de breedte van de container moet gedefinieerd zijn, het element moet de waarden overflow: verborgen en witruimte: nowrap hebben. Niet geërfd.

Syntaxis

P (breedte: 300px; overflow: verborgen; witruimte: nowrap; tekst-overflow: ellips; ) Afb. 1. Snijd tekst bij met de eigenschap text-overflow

2. Woordafbreking binnen woorden

In een normale situatie worden woorden afgebroken naar een andere regel waar er spaties of koppeltekens zijn ("zacht koppelteken"), of in het geval van geforceerde woordafbreking met behulp van het element
. Met deze eigenschap kunt u afbreekregels binnen woorden instellen, zodat lange regels de ruimte in de container volledig vullen. Niet gebruikt voor CJK-talen (Chinees-Japans-Koreaans). Geërfd.

Syntaxis

P (woordeinde: normaal;) p (woordeinde: alles breken;) p (woordeinde: alles behouden;)

3. Wikkel woorden in de tekstomloopregel

Het wordt gebruikt in gevallen waarin de tekst niet in de container past en buiten de rand gaat. Hiermee kunt u lange woorden afbreken en naar de volgende regel verplaatsen. Geërfd. Er wordt alleen geactiveerd als de witruimtewaarde regeleinden toestaat.

Vaak is het nodig om een ​​nieuwe alinea toe te voegen, maar zonder de lege regel die door de alineatag wordt ingevoegd

Voor sommige tekstfragmenten is de standaard alinea-afstand eenvoudigweg niet geschikt. Dit kunnen inscripties zijn onder afbeeldingen en in tabellen, gedichten, citaten, voetnoten en aantekeningen.

Om regeleinden te forceren, is er een speciale tag voorzien, waarvan de functie is vervat in de naam br (rij afbreken - "een rij breken, regel"). Label
Hypertext Markup Language (HTML) betekent dat alle inhoud die daarop volgt op een nieuwe regel moet beginnen. Indien nodig kunt u meerdere tags achter elkaar toevoegen om de vereiste afstand te bereiken.

Label
Het is niet hoofdlettergevoelig en vereist geen afsluitende tag omdat het een leeg element is, maar het is beter om eraan te wennen om alle tags te sluiten. In XHTML moet de break-tag worden "gesloten" met een backslash.

Voorbeeld van het gebruik van een break-tag