Från new line html. Radbrytning i HTML: använd taggen br

Inte bara människor, utan även ord kan vara svåra att bära. Till exempel är en kemisk förening mycket lik vissa människor med " omstörtad"! Vi vet inte hur vi ska hantera sådana svåra personligheter, men CSS kommer definitivt att hjälpa till med ordinpackning:

Varför uthärda det "olidliga"

I de flesta fall, när textinnehåll visas på webbsidor i en webbläsare, tillämpas inte radbrytning. Om ordet inte passar helt in i skärmområdet är det som standard helt " rör sig" till nästa rad.

Partiell avstavning gäller bara för långa, komplexa ord som innehåller flera termer och som är åtskilda av ett bindestreck. Det är här som problem uppstår med att visa dessa ord på skärmar med olika diagonaler och i olika webbläsare. Förutsäg samtidigt hur länge ordet kommer att vara " att se ut som"det är svårt på klientsidan, så att definiera bindestreck" manuellt" är meningslöst:

Lösning av ordet wrap-problem med HTML

Innan vi tittar på att slå in långa ord i CSS, låt oss utforska hur hypertextspråk kan lösa detta problem.
Det finns flera alternativ för detta i HTML:

• Använda soft break-symbolen -- låter dig ställa in brytpunkten för ett sammansatt ord. När du ändrar storlek på webbläsarfönstret till nästa rad Endast delen av det långa ordet efter ­ är bindestreck, och efter den första halvan visas ett bindestrecksliknande bindestreck:

Ett exempel på en komplex kemisk förening och text - metylpropenylendihydroxi-cycinnamenylakrylsyra

• Använda en tagg - elementet dök upp i HTML 5. Det tjänar också till att tala om för webbläsaren var den ska bryta ett komplext eller långt ord. Men till skillnad från det tidigare specialtecknet visas inte denna tagg på platsen " fel» avstavning, som kan påverka läsbarheten för hela texten negativt:

metylpropenylen dihydroxicinna menylakrylsyra

Taggstöd i vissa webbläsare felaktigt implementerad. Det kommer att fungera i dem om display-egenskapen med värdet inline-block anges i CSS-koden.

Slå in ord med CSS

Innan vi inaktiverar ordlindning i CSS, låt oss titta på några egenskaper som kan lösa huvudproblemet:

1. word-wrap – beskriver hur man slår in ord som inte passar i längden på fastställda dimensioner behållare. Det är värt att varna omedelbart att det finns problem med valideringen av den här egenskapen, och W3C-konsortiet har ännu inte beslutat om implementeringen av sitt stöd i CSS. Därför kommer specialiserade validerare att generera ett fel om ordlindning finns i koden:

Men den här egenskapen "uppfattas" av alla moderna webbläsare och är effektiv lösning problem med avstavning av långa ord. word-wrap tar följande värden:

• normal – ord avstavas inte;
• brytord automatisk överföring ord;
• ärva – ärver värdet av föräldern.

Ett exempel som illustrerar användningen av den här egenskapen:

I det nya CSS-specifikationer egenskapen word-wrap har bytt namn till overflow-wrap . Båda fastigheterna accepterar samma värden. Men overflow-wrap-stöd är fortfarande dåligt implementerat, så det är bättre att använda gammal version egenskaper:

Som du kan se i skärmdumpen ovan stöds den nya egenskapen Google Chrome, men stöds inte i IE. Därför är det bättre att inte använda overflow-wrap för ordlindning i CSS.

1. word-break – sätter regler för att bryta linjer inuti behållaren om de inte passar in i den på bredden. Detta är en ny egenskap och stöd för den har implementerats i CSS3. Det är giltigt, men är utformat för att fungera med strängar, så radbrytning kan vara grammatiskt felaktig.

Egenskapen har tre värden:

• normal – standardöverföringsregler används;
• ordbrytning – radbrytningar utförs automatiskt så att ordet passar in i behållarens breddmått;
• keep-all – inaktiverar automatisk ordavstavning på kinesiska, japanska och koreanska. För andra språk är effekten av värdet lik normal.

1. bindestreck är en ny egenskap som introducerades med lanseringen av CSS3. Den ställer in hur webbläsaren ska hantera radbrytning i utdatatexten. Fastigheten accepterar flera värden:

• ingen – inaktiverar ordbrytning i CSS;
• manuell( standardvärde) – ord lindas in i de områden av textblocket där detta anges med taggen eller mjuk överföring (-);
• auto – webbläsaren radbryter automatiskt ord baserat på dess inställningar.

För korrekt funktion egenskaper i taggen eller

Attributet lang måste finnas med värdet "ru" (lang="ru").

Egendom stöds senaste versionerna IE, Opera och Firefox. Var och en av dem har sin egen CSS-linje. Bindestreck stöds inte av Google Chrome. Exempel:

Förbud mot ordavstavning

Ibland måste du se till att hela raden visas utan paus. Att förbjuda radbrytning i CSS kan implementeras på flera sätt:

• Använda ett icke-avbrytande mellanslag   , som ställs in vid radbrytningar eller ordbrytningar;
• Genom att ställa in egenskapen vitt utrymme betyder " nurap» ( white-space: nowrap ).

Exempel på implementering:

Nu kan du överföra från använder CSSäven de längsta orden. Men du kommer att behöva ta itu med problemet med människor som är svåra att tolerera själv. Försök att påverka dem med CSS-metoder

10 april 2016

Hej alla). Jag fortsätter att skriva om olika förmåner css språk, som på ett eller annat sätt kan hjälpa till med layout. Och idag vill jag berätta hur man lindar in ord i CSS om de inte passar in i deras behållare. Jag ska visa dig allt med ett verkligt exempel.

Aktivera avstavning för ord som inte passar

Låt oss säga att jag har ett block som är 100 pixlar brett och jag behöver skriva lite text i det. Det finns ett ord i texten "självextraherande". Så här går till exempel ett arkiv till) Men det är inte meningen. Ordet är väldigt långt, det passar helt enkelt inte in i behållarens bredd. Låt oss skriva det i ett så smalt block (100 pixlar). Vad kommer att hända?

Som ni ser har det stackars ordet krupit ut ur behållaren, ja, det har ingenstans att ta vägen, vad kan man göra. Och detta är utan indrag. Så, det är här ordet-wrap-egenskapen kommer till undsättning. Här är vad du behöver ställa in på blocket för att aktivera ordlindning i det:

Ord-wrap: break-word;

Och för att göra det mer övertygande kan du även lägga till inre stoppning. Så efter att ha tillämpat egenskapen ser vi att ord som är för långa kommer att överföras bokstav för bokstav till en annan rad. Dessutom, även om den andra raden inte räcker för ordet, kommer resten av den att överföras till den tredje, etc.

Jag vill notera att fastigheten kan användas utan rädsla. För det första fungerar det utmärkt i webbläsare idag. För det andra fungerar det smart. För alla normala ord kommer det nämligen inte att finnas några bindestreck, hela orden kommer att överföras till nästa rad, så läsbarheten kommer inte att påverkas. Du kan se det på den här skärmdumpen.

När ska man använda word-wrap

Jag har faktiskt sett 2 användningsfall än så länge. Den första är bara för smala block, där du är rädd att långa ord kan sticka ut utanför blockets gränser. Den andra är när designern avsåg att webbplatsens titel skulle vara i flera rader.

Så i den här artikeln lärde vi oss hur man gör omslag i css. Det var allt för mig idag. Vi ses.

Vlad Merzhevich

Till skillnad från text i tryck, används bindestreck sällan på en webbsida, eftersom vi inte är strikt bundna till pappersformatet. Webbplatser kan titta på olika monitorer, Med olika upplösningar, likgiltig operativsystem och webbläsare. Allt detta ger upphov till en sådan kombination av kombinationer att det är omöjligt att förutse hur den slutliga texten kommer att se ut för användaren. På grund av detta är text vanligtvis vänsterjusterad och bindestreck förekommer i hela ord. Men ändå är ordavstavning nödvändig i vissa fall, till exempel när långa kemiska eller medicinska termer används i smala kolumner med en given bredd, för estetikens skull. I HTML och CSS manual eller automatiska metoder Det finns inte så många bindestreck att lägga till, så jag listar dem alla.

Använda en tagg

Märka introduceras i HTML5 och skapar ordlindning vid behov. På de platser där avstavning är tillåten enligt det ryska språket, infogar vi (exempel 1). Om hela ordet passar in i den tilldelade bredden kommer denna tagg inte att visa sig på något sätt och vi kommer inte ens att veta om dess närvaro. Om ordet inte passar finns webbläsaren på platsen för taggen skapar en överföring.

Exempel 1. Tagg

Ett tolfte klass drömmaren Anzhelika, efter att ha tagit examen från skolan, valde yrket företag produceras förare hjälplös.

Resultatet av detta exempel visas i fig. 1.

Ris. 1. Text med bindestreck

Mjuk överföring

Ansökan har en allvarlig nackdel - att förstå om överföringen ligger framför oss eller separat ord på en annan linje kan du inte. På grund av detta kan meningen med meningen gå förlorad och den kan missförstås. Avstavningar måste göras enligt typografins regler, nämligen: lägg till ett bindestreck i slutet av raden. Fungerar utmärkt med detta mjuk överföring, i HTML-koden finns det ett specialtecken för det - . Den har samma roll som en tagg - syns inte i vanlig text och flyttar ordet till en annan rad samtidigt som ett bindestreck läggs till (exempel 2).

Exempel 2: Mjuk överföring

En elev i elfte klass, Angelica, valde efter examen från skolan yrket affärsförare.

Resultatet av detta exempel visas i fig. 2. Lägg märke till hur mycket mer estetiskt tilltalande och tydligare texten ser ut jämfört med figuren. 1.

Ris. 2. Text med bindestreck

ordbrytande egendom

För att automatisera processen att skapa bindestreck, använd egenskapen word-break med värdet break-all (exempel 3). Du behöver inte längre lägga till några symboler eller taggar i HTML-stilar.

Exempel 3. Använda ordbrytning

Elfteklassaren Angelica valde yrket kontorsarbetare efter skolan.

Resultatet av detta exempel visas i fig. 3. Reglerna för textavstavning beaktas inte i det här fallet, så ord kan avstavas på ett mycket bisarrt sätt.

Ris. 3. Text med bindestreck

Av alla listade metoder ger "halvmanuell" med - bästa resultat- reglerna för det ryska språket följs, texten ser mest estetiskt tilltalande ut. Använd den när det finns långa ord i texten.

Bindestreck egendom

Och slutligen, den mest kraftfulla och bekväma egenskapen för automatisk tillägg bindestreck - bindestreck. Dess åtgärd är baserad på avstavningsordboken inbyggd i webbläsaren, så det ger det bästa resultatet. Stöds i IE10, Firefox, Android och iOS. Chrome och Opera stöder inte. För att detta ska fungera, för taggen lägg till attributet lang med värdet ru (exempel 4).

Exempel 4: Använda bindestreck

Elfteklassaren Angelica valde yrket kontorsarbetare efter skolan.

Resultatet av detta exempel visas i fig. 4.

Ris. 4. Text med bindestreck

Förbud mot överföringar

Ofta uppstår den motsatta uppgiften - att förbjuda avstavningar på platser där de är oacceptabla enligt språkets regler. Du kan till exempel inte separera måttenheter från ett tal (10 ml), beteckningen på ett årtal (54 f.Kr.), initialer från ett efternamn, brytstabila förkortningar (etc.) etc. För att hindra webbläsaren från att lägga till bindestreck vid utrymmet ska det ersättas av icke-brytande utrymme(exempel 5).

Exempel 5: Användning

Sjön vid koordinaterna 70° 58′ 19″ N. w. 97° 24′ 5″ Ö. beläget i Taimyr Dolgano-Nenets-regionen Krasnoyarsk territorium Ryssland.

I i detta exempel För korrekt skrivning av koordinater används den, vilket inte tillåter text att slås in.

CSS3 text Innehåller textegenskaper för att hjälpa till att lösa problem med textbrytning och textbeskärning i innehåll.

CSS3-egenskaper för textformatering

1. Trimma textöverflödesraden

Egenskapen låter dig begränsa längden på text när den inte passar in i behållaren, visuellt klippa av den eller visa den med ellipser. Egenskapen fungerar endast om följande villkor är specificerade: bredden på behållaren måste definieras, elementet måste ha värdena overflow: hidden och white-space: nowrap . Inte ärvt.

Syntax

P (bredd: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellips; ) Fig. 1. Beskär text med hjälp av egenskapen text-overflow

2. Avstavning inom ord brytning

I normal situation ord överförs till en annan rad på platser med mellanslag eller bindestreck ("mjukt bindestreck") eller i fallet tvångsöverföring använder element
. Denna fastighet låter dig ställa in avstavningsregler i ord för att långa linjer fyllde utrymmet inuti behållaren helt. Används inte för CJK-språk (kinesiska-japanska-koreanska). Ärvt.

Syntax

P (ord-break: normal;) p (ord-break: break-all;) p (ord-break: keep-all;)

3. Slå in ord i en radbrytande rad

Den används i de fall där texten inte passar in i dess behållare och går utanför dess gräns. Låter dig bryta långa ord och flytta dem till nästa rad. Ärvt. Utlöses endast om blankstegsvärdet tillåter radbrytningar.