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, deze visueel afsnijden of weergeven 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 normale situatie woorden worden verplaatst naar een andere regel waar spaties of koppeltekens staan ​​(" zachte overdracht"), of in geval van gedwongen overdracht met behulp van het element
. Met deze eigenschap kunt u afbreekregels binnen woorden instellen lange rijen vulde de ruimte in de container volledig. Niet gebruikt voor CJK-talen (Chinees-Japans-Koreaans). Geërfd.

Syntaxis

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

3. Woorden in een woordomloopregel plaatsen

Het wordt gebruikt in gevallen waarin de tekst niet in de container past en buiten de rand gaat. Laten we rippen lange woorden en breng ze over naar volgende regel. Geërfd. Wordt alleen geactiveerd als de witruimtewaarde regeleinden toestaat.

Hallo allemaal en laten we beginnen. Laten we zeggen dat we de volgende tekst hebben:

De regering van de Verenigde Arabische Emiraten en de regering concentreren in deze stad de nieuwste technologieën, gebaseerd op de nieuwste prestaties van wetenschap en technologie, in een poging er een stad van de toekomst van te maken, alsof ze rechtstreeks uit een sciencefictionscherm komt. film. Deze technologieën omvatten robotpolitieagenten, robotauto's en transportsysteem Hyperloop en in de nabije toekomst zal er in Dubai een geautomatiseerde vliegende taxidienst operationeel worden. En ter voorbereiding op dit evenement maakte een elektrisch tweezits Volocopter-vliegtuig met 18 rotors, dat als taxi zal worden gebruikt, zijn eerste vlucht in automatische modus, schrijven ze...

Hier hebben we wat tekst waarmee we nu gaan werken.

En de eerste eigenschap die we zullen overwegen, wordt woordbreuk genoemd

woordbreuk: normaal | alles behouden | alles breken

We zijn vooral geïnteresseerd in twee betekenissen van dit pand normal - de standaardwaarde en break-all waarmee we vaststellen dat woordomloop karakter voor karakter wordt uitgevoerd. Wat betreft alles bewaren dan gegeven waarde Wordt gebruikt om woorden in het Chinees, Japans en Koreaans af te breken.

P( woord-break: break-all;. )

Houd er rekening mee dat na het toepassen van deze stijl al onze tekst wordt uitgerekt tot de volledige beschikbare breedte en dat koppeltekens niet door woorden, maar door karakters worden uitgevoerd. Deze eigenschap kan handig zijn als we een heel lang woord hebben dat niet in de opgegeven breedte past. Dit zorgt echter voor een soort ongemak, aangezien absoluut alle woorden karakter voor karakter worden overgedragen, zelfs de woorden die in de gegeven breedte passen.

Gelukkig is er een soortgelijke eigenschap die alleen woorden overdraagt ​​die niet in karakters passen. Het heet overflow-wrap:

P( overflow-wrap: break-woord; )

en na het toepassen van de break-word-waarde wordt al onze tekst woord voor woord overgedragen, en woorden die niet in de opgegeven breedte passen, worden teken voor teken overgedragen. We kunnen zeggen dat de taak is voltooid! Naast de break-word-waarde accepteert deze eigenschap:

overloopwikkel: normaal | breekwoord | erven;

Laten we nu verder gaan met een meer geavanceerde CSS-eigenschap voor woordterugloop in tekst.

Laten we eens kijken naar de eigenschap white-space, waarmee we de werking van de pre-tag kunnen imiteren zonder de tekst zelf in monospace te veranderen.

witruimte: normaal | nurap | voor | voorregel | voorverpakken | erven

Met deze eigenschap werken we in principe alleen met spaties in de tekst. Als we bijvoorbeeld de volgende stijl op onze tekst toepassen:

Witruimte: nowrap;

alle regeleinden worden genegeerd en onze tekst wordt als één regel weergegeven.

Witruimte: pre;

Als de waarde pre is, zijn alle regeleinden vergelijkbaar met die in de broncode. Bovendien, als de tekst niet in de opgegeven breedte past, wordt deze niet overgedragen. Als we willen dat het wordt overgedragen, moeten we de pre-line-waarde opgeven.

Als we niet alleen rekening willen houden met regeleinden broncode, maar ook spaties tussen woorden, dan moet u het volgende specificeren:

Witruimte: pre-wrap;

Dat is eigenlijk alles wat ik u wilde vertellen over woordafbreking met behulp van css. Ik hoop dat dit artikel nuttig voor je was en dat je de opgedane kennis meer dan eens zult gebruiken.

Nou, ik neem afscheid van je. Ik wens je succes en veel geluk! Doei!

10 april 2016

Hallo allemaal). Ik blijf over verschillende schrijven gunstige eigenschappen CSS-taal, wat op de een of andere manier kan helpen bij de lay-out. En vandaag wil ik je vertellen hoe je woorden in CSS kunt verpakken als ze niet in hun container passen. Ik zal je alles laten zien met een echt voorbeeld.

Schakel woordafbreking in voor woorden die niet passen

Laten we zeggen dat ik een blok van 100 pixels breed heb en dat ik er wat tekst in moet schrijven. Er staat een woord in de tekst "zelfuitpakkend". Dit is bijvoorbeeld hoe een archief tot stand komt) Maar daar gaat het niet om. Het woord is erg lang, het past simpelweg niet in de breedte van de container. Laten we het in zo'n smal blok schrijven (100 pixels). Wat zal er gebeuren?

Zoals je kunt zien, is het arme woord uit de container gekropen, nou, het kan nergens heen, wat kun je doen. En dit is zonder inspringing. Dit is dus waar de eigenschap word-wrap te hulp komt. Dit is wat u op het blok moet instellen om tekstterugloop erin in te schakelen:

Woordomloop: breekwoord;

En om het overtuigender te maken, kun je ook interne opvulling toevoegen. Dus na het toepassen van de eigenschap zien we dat te lange woorden letter voor letter naar een andere regel worden overgebracht. Bovendien, zelfs als de tweede regel niet genoeg is voor het woord, wordt de rest overgebracht naar de derde, enz.

Ik zou willen opmerken dat het pand zonder angst kan worden gebruikt. Ten eerste werkt het tegenwoordig prima in browsers. Ten tweede werkt het slim. Voor alle normale woorden zal er namelijk geen woordafbreking plaatsvinden; er worden hele woorden afgebroken volgende regel, zodat de leesbaarheid niet wordt beïnvloed. Je kunt het in deze schermafbeelding zien.

Wanneer moet u woordomloop gebruiken?

Eigenlijk zie ik tot nu toe 2 gebruiksscenario's. De eerste is alleen voor smalle blokken, waarbij je bang bent dat lange woorden lelijk buiten de grenzen van het blok uitsteken. De tweede is wanneer de ontwerper de titel van de site uit meerdere regels wilde halen.

In dit artikel hebben we dus geleerd hoe we woordterugloop in CSS kunnen uitvoeren. Dat is alles voor mij vandaag. Tot snel.

Vaak is er behoefte aan aanvulling nieuwe paragraaf, maar zonder lege regel, die wordt ingevoegd door de paragraaftag

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
hypertekst taal html-opmaak betekent dat alle inhoud die erop volgt op een nieuwe regel moet beginnen. Indien nodig kunt u meerdere tags achter elkaar toevoegen om de vereiste afstand te bereiken.

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

Voorbeeld van het gebruik van een break-tag