Nie sú len ľudia, ale aj slová. Napríklad chemická zlúčenina je veľmi podobná niektorým ľuďom s "Nastavenie"! Nevieme, ako sa vyrovnať s takými zložitými osobnosťami, ale s prevodom slova CSS presne pomôže:

Prečo niesť "neznesiteľné"

Vo väčšine prípadov, pri zobrazovaní textových stránok webových stránok v prehliadači, prenos slov sa neuplatňuje. Ak Slovo nehodí úplne do oblasti obrazovky, potom štandardne úplne "presunie" na nasledujúci riadok.

Čiastočný prevod sa vzťahuje len na dlhé a ťažké slová pozostávajúce z niekoľkých podmienok a oddelených podľa pomlčky. Tu sú problémy s zobrazovaním týchto slov na rôznych obrazovkách diagonálne av rôznych prehliadačoch. Zároveň je ťažké presne predpovedať, ako dlho bude slovo "vyzerať" na strane klienta, preto nastaviť transfery "ručne" bezvýznamné:

Riešime problém prenosu problému s HTML

Pred zvážením prenosu dlhých slov na CSS študujeme možnosť riešenia tohto problému pomocou hypertextového jazyka.
Ak to chcete urobiť, HTML má niekoľko možností:

• Pomocou symbolu mäkkej prestávky - - Umožňuje nastaviť rozpis komplexného slova. Keď sa veľkosti okna prehliadača, len časť dlhého slova, stojaca po a plachom, sa prenesie do nasledujúceho riadku a po prvej polovici prenosového znaku podobné pomlčke je odvodené:

Príklad komplexnej chemickej zlúčeniny a textu - kyseliny metylpropenylandhydrocy-sycinnoillakákovej

• Pomocou tagu - prvok sa objavil v HTML 5. Slúži tiež na označenie prehliadača, aby sa zlomil komplexné alebo dlhé slovo. Ale na rozdiel od predchádzajúceho špeciálneho symbolu táto značka neprináša znak prevodu v mieste "chyby", čo môže negatívne ovplyvniť čitateľnosť celého textu:

metylpropenylén digidroxycinna kyselina menelová akrylová

V niektorých prehliadačoch podporuje značku Implementované nesprávne. Budú pracovať v nich, ak je displej vlastnosti s hodnotou inline-blok napísaný v CSS Code.

Transfer Word CSS

Pred zákazom prenosu slov do CSS, poďme zvážiť niekoľko vlastností schopných vyriešiť hlavný problém:

1. word-Wrap - popisuje, ako vykonať prevod slov, ktoré nie sú umiestnené v dĺžke na inštalovaných rozmeroch kontajnerov. Je potrebné varovať hneď, že problémy vznikajú s validáciou tohto majetku as implementáciou jej podpory v CSS Consortium W3C ešte nebolo stanovené. Preto špecializované validátory v prítomnosti programu Word-Wrap v kóde vydajú chybu:

Táto nehnuteľnosť je napriek tomu "vnímaná" všetkými modernými prehliadačmi a je účinným riešením problému prevodu dlhých slov. Word-Wrap má nasledujúce hodnoty:

• normálne - slová nie sú prevedené;
• break-Word - Automatický prevod slova;
• zdediť - dedičstvo rodičovskej hodnoty.

Príklad ilustrujúci aplikáciu tejto nehnuteľnosti:

V novom špecifikácii CSS bola vlastnosť Word-Wrap premenovaná v prepadovom obale. Obe vlastnosti majú rovnaké hodnoty. Podpora pretečenia-wrap je však stále slabo implementovaná, takže je lepšie používať starú verziu nehnuteľnosti:

Ako je možné vidieť na vyššie uvedenej screenshot, nový majetok je podporovaný spoločnosťou Google Chrome, ale nie je podporovaná v IE. Preto prepad-wrap je lepší nepoužívať na prenos slov na CSS.

1. slovo-Break - Nastaví pravidlá previesť pravidlá vnútri kontajnera, ak nie sú umiestnené na šírku. Toto je nový majetok a jej podpora bola implementovaná v CSS3. Je platný, ale je určený na prácu s radmi, takže prenos slov môže byť gramaticky nesprávne.

Vlastnosť má tri hodnoty:

• používajú sa normálne pravidlá migrácie stanovené štandardne;
• prenos slova - prenos riadka sa automaticky vykoná tak, že slovo zapadá do veľkosti šírky kontajnera;
• udržujte-všetko vypne automatický prenos slov v čínštine, japončine a kórejčine. V prípade iných jazykov sú hodnoty podobné normálnemu.

1. pomlci je nový majetok, ktorý sa objavil s výstupom CSS3. Stanovuje, ako prehliadač prenesie slová do výstupného textu. Vlastnosť má niekoľko hodnôt:

• Žiadne - zakáže prevod slov na CSS;
• manuálny ( predvolená hodnota) - Slová sa prenesú v týchto oblastiach textového bloku, kde je špecifikovaná pomocou značky alebo mäkký prenos (-);
• aUTO - prehliadač automaticky prenáša slová na základe jeho nastavení.

Pre správnu prevádzku majetku v štítku alebo

Atribút LANG musí byť prítomný s hodnotou "RU" (Lang \u003d "RU").

Nehnuteľnosť je podporovaná najnovšími verziami IE, Opera a Firefox. Pre každú z nich je predpísaná vlastná línia CSS. Spoločnosť Google Chrome nie je podporovaná pomlčkami. Príklad:

Zákaz prevodu slov

Niekedy musíte urobiť, aby sa reťazec úplne zobrazoval bez prestávky. Zákaz prevodu slov v CSS možno realizovať niekoľkými spôsobmi:

• Pomocou neoddeliteľného priestoru a nbsp, ktorý je inštalovaný v lokalitách reťazca alebo slov;
• Nastavenie majetku biely vesmír. "NOWRAP" biely-space: NOWRAP).

Príklad implementácie:

Keď ležíte, webmasteri pravidelne vznikajú otázku: Ako bude prenos textu prenesený? Vo väčšine prípadov prehliadač sa s touto úlohou spoľahlivo zvládne. Niekedy sa však tento proces musí prevziať pod kontrolou, najmä vydával dlhé slová a frázy, ktoré s nesprávnym prenosom, stratí význam.

Vlastnosť Word-Wrap

V HTML na rozdelené reťazce je špeciálny tag
. Jeho príliš časté používanie sa však považuje za zlý tón medzi vývojármi a často označuje neiskupistickú situáciu. Ako dôkaz si predstavte, že máte logo a chcete každý list od nového riadku:

Ukázalo sa, že objemný a škaredý kód, z ktorého sa z každého developer stane kultúrny šok. A čo robiť, ak chcete mať logo v desktopovej verzii horizontálne, as šírkou obrazovky menej ako 550 pixelov vertikálne? Preto na konfiguráciu vzhľadu prvkov, vždy používate kaskádové štýly. Najmä s nástrojmi CSS sa prenos radu vykonáva elegantnejším spôsobom. V tomto prípade neexistuje nadbytočná značka, ktorá znižuje iba rýchlosť sťahovania stránok.

Prvá vlastnosť, na ktorú by ste mali kontaktovať na spracovanie textu, je slovo-wrap. Terie tri hodnoty: Normal, Break-all a Udržujte všetko. Budete musieť spomenúť len na prestávku. Normálne stojany štandardne a nemá zmysel označiť. Udržujte-všetky prostriedky v dokumente CSS zakazujúci reťazec. Navrhnuté špeciálne pre čínske, japonské a kórejské hieroglyfy. Preto, ak nebudete blog na niektoré z týchto jazykov, nehnuteľnosť nebude pre vás užitočná. A nie je podporovaný prehliadačom Safari a mobilné telefóny na základe iOS.

Ak chcete, aby sa logo z predchádzajúceho príkladu priradili pomocou CSS na novú radu každého listu, musíte zaregistrovať nasledujúci kód:

P (font: Bold 30px HelveTICA, SANS-SERIF; Šírka: 25PX; Word-Wrap: Break-All;)

Veľkosť šírky a písma je vybratá tak, aby miesta stavali na jedno písmeno. Slovo-zábal s prestávkou-celú hodnotu rozpráva prehliadač, že slovo musí byť prenesené na nový reťazec zakaždým. Nedostatočný majetok nie je možné volať. Bude však užitočné pri vytváraní malých blokov s textom, ako sú polia pre zadanie pripomienok.

BIELY VESMÍR

Bežná chyba nováčikových webových vývojárov je pokúsiť sa upravovať text s medzerami alebo stlačiť klávesy ENTER, a potom sa čudovať, prečo ich úsilie nie je viditeľné na stránke. Koľkokrát má ani "vstup", prehliadač ho ignoruje. Ale existuje spôsob, ako to urobiť, ako potrebujete, a zohľadniť všetky intervaly.

V dokumente CSS môže byť prevod riadkov priradený pomocou vlastnosti bieleho priestoru nakonfigurovaný tak, aby sa uskutočnil s prihliadnutím na medzery alebo stlačením klávesu "ENTER". Biele-priestor s predbežnou hodnotou urobí prehliadač v zadávaní textu.

Ak zmeníte predbežné riadky na predbežnom zabalení v kóde CSS, prevod riadkov nastane s prihliadnutím na medzery. A naopak, zakázať akýkoľvek prevod priradením majetku bieleho priestoru s hodnotou NOTRAP:

#Wrapper P (Farba: #FFF; čalúnenie: 10px; Font: Bold 16px HelveTICA, SANS-SERIF; Biely-space: Nowrap;)

Overflow.

Ďalším užitočným nástrojom na prácu s textom je prepad textu. Okrem prenosu reťazca umožňuje CSS vlastnosť vám umožní obsah plodiny, keď je nádoba naplnená. Trvá dve hodnoty:

• cLIP - JUST TEXTOVAŤ;
• ellipsis - veľa pridáva.

#Wrapper P (Farba: #FFF; Padding: 10px; Font: Bold 16px Helvetica, Sans-Serif; Text-Overflow: Ellipsis; / * Pridať DOT * / Biely-space: Nowrap; / * Zakázať prenos riadkov * / Prepad: skryté; / * skryť všetko presahuje kontajner * /)

Aby bola majetok pracovať, je tiež potrebné priradiť zákaz prevodu reťazca a pretečenia s skrytou hodnotou.

Pokračujeme v štúdiu Schopnosti CSS3 a vo fronte sme prevádzali slová. Prenos slova je veľmi užitočná funkcia, pretože text na stránke vyzerá krajšie. Tiež niekedy musíte urobiť stĺpce ako v novinách, a potom zarovnanie na pravej alebo ľavej hrane vyzerá škaredo. Ale ak sa natiahnete cez celú šírku stĺpca, potom pre oko príjemnejšie na čítanie takéhoto textu. Ale v tomto prípade existuje taká nuancia ako veľké priestory medzi slovami, ktoré vyzerajú škaredé. Toto budeme opravené v tejto lekcii.

CSS3 VLASTNOSTI:

Štúdium článkov, ktoré pre vás zdvihli, vyššie, sa tiež naučíte veľa užitočných vlastností, a tiež sa dozviete o nových funkciách CSS3, čo umožňuje používať menej ešte menej obrázkov na stránke.

Vytvorte prevod slov

Text bez prevodu

Ak niekto nerozumel, o čom hovoríme, tu je príklad bez použitia prevodu programu Word:

S prevodom

Ale príklad, keď používame slovo prevod CSS:

COOL! A ako to urobiť v kóde?

Teraz si myslím, že každý chápe, čo urobíme. Preto je čas naučiť sa o novom majetku, ktorý je v CSS3!

A táto nehnuteľnosť je napísaná ako táto - pomlčky.

Jednoducho, že? Ale pre každý z prehliadačov existujú predpony, takže to vyzerá v kóde:

Nezabudnite natiahnuť text po celej šírke bloku pomocou vlastnosti zarovnania textu: zdôvodnite, inak nebudete vidieť požadovaný výsledok.

Ahoj všetci a pokračujte. Predpokladajme, že máme nasledujúci text:

Vláda Spojených arabských emirátov a administratíva sa sústreďujú v tomto meste všetky najnovšie technológie založené na najnovších úspechoch vedy a techniky, snaží sa zmeniť svoje mesto budúcnosti, ako keby sa z obrazovky akéhokoľvek sci-fi film. Tieto technológie zahŕňajú roboty-políciu, roboty autá a hyperloop dopravný systém av blízkej budúcnosti, služba automatických lietajúcich taxíkov začne fungovať v Dubaji. A ako súčasť prípravy na túto udalosť, elektrický dvojitý letecký solocopter s 18 rotormi, ktorý sa použije ako taxík, urobil prvý let v automatickom režime, písať ...

tu máme nejaký text, s ktorým začneme pracovať.

A prvá vlastnosť, ktorú považujeme za slovo-break

slovo-Break: Normal | Udržiavať Prestávky.

Zaujímame sa najmä o dve hodnoty tohto normálneho majetku - predvolená hodnota a prestávka, s ktorými sme nastavili, že prevláda prevod slov. Pokiaľ ide o udržiavanie-všetko, táto hodnota sa používa na prenos slov v čínštine, japončine a kórejsku.

P (slovo-break: break-all;)

všimnite si, že po použití tohto štýlu je náš celý text natiahnutý do plnej dostupnej šírky a transfery sa nevykonávajú podľa slov, ale symbolmi. Táto vlastnosť môže byť užitočná, keď máme veľmi dlhé slovo, ktoré sa nezapadá do vopred určenej šírky. To však vytvára druh nepríjemností, pretože to prevláda absolútne všetky slová aj tie, ktoré sú zatvorené v danom šírke.

Našťastie existuje podobná vlastnosť, ktorá prevody nie sú len prehľadávanie slov zo symbolov. Nazýva sa Pretflow-Wrap:

P (Prepad-wrap: Break-Word;)

a po uplatnení hodnoty prestávok, všetky naše text sa prenesie podľa slov a slov, ktoré sa nezhodujú do špecifikovanej šírky tolerovanej. Môžete povedať, že úloha je dokončená! Okrem hodnoty Break-Word, táto nehnuteľnosť prijíma:

prepadový zábal: Normal | Break-Word zdediť;

Teraz poďme do pokročilejšieho majetku CSS na prenos slov v texte.

Zvážte majetok bieleho priestoru, s ktorým môžeme napodobniť prácu pre značku bez zmeny samotného textu na monochyr.

biely-space: Normal | Nowrap | Pre | Predbežný Pre-Wrap | zdediť.

V podstate s použitím tejto vlastnosti pracujeme len s medzerami v texte. Ak napríklad aplikujeme nasledujúci štýl na náš text:

Biely-space: Nowrap;

všetky prevody reťazcov budú ignorované a náš text sa zobrazí vo forme jedného riadku.

Biely-space: pre;

V prípade pre všetky prevody reťazcov budú podobné prevodu v zdrojovom kóde. Okrem toho, ak text nehodí do danej šírky, nebude prenesený. Ak chceme, aby sa presunula, potom musíme zadať hodnotu predbežného riadku.

Ak chceme, aby sme brali do úvahy nielen prevod dažďov zdrojového kódu, ale aj medzery medzi slovami, potom musíte zadať:

Biely priestor: Pre-Wap;

Tu v zásade a všetko, čo som vám chcel povedať o prevode slov CSS. Dúfam, že tento článok bol pre vás užitočný a ste viac ako ešte raz používajte získané poznatky.

No, hovorím vám zbohom. Želám si úspech a veľa šťastia! Kým!

Vlad merzehevich

Na rozdiel od textu v tlači, webová stránka zriedka používa transfery, pretože nie sme zviazaní formátu papiera. Stránky sa môžu pozerať na rôzne monitory, s rôznym rozlíšením, v rôznych operačných systémoch a prehliadačoch. To všetko vytvára takú kombináciu kombinácií, ktorá je predpovedať, ako bude konečný text hľadať používateľa, že je to nemožné. Z tohto dôvodu je text zvyčajne zarovnaný s ľavým okrajom a transfery sa vyskytujú slovami úplne. Napriek tomu sú potrebné prevod slov v niektorých prípadoch, napríklad keď sa používajú dlhé chemické alebo lekárske termíny, v úzkych stĺpci danej šírky, kvôli estetike. V príručke HTML a CSS alebo automatické spôsoby pridania portov nie je toľko, takže budem zoznam všetko.

Pomocou značky

Tag Zadané do HTML5 a v prípade potreby vytvorí prevod slov. Na týchto miestach, kde podľa pravidiel ruského jazyka umožníme prevod, vložiť (Príklad 1). Ak je slovo plne umiestnené v rezervovanej šírke, táto značka sa nezobrazí a ani nebudeme vedieť o svojej prítomnosti. Ak sa slovo nezapadne, prehliadač je v mieste značky Vytvorí prenos.

Príklad 1. Tag

Jeden nADC.ATIKLAS snia Angelica Po ukončení štúdia si vybrala profesiu obchod vodič pekný.

Výsledok tohto príkladu je znázornený na obr. jeden.

Obr. 1. Text s prevodmi slov

Mäkký prenos

Žiadosť Má vážnu nevýhodu - pochopiť, preniesť na nás alebo samostatné slovo na inom riadku, je to nemožné. Z tohto dôvodu sa môže zmysel pre návrh stratený a bude nepochopený. Prenos by sa mal vykonať podľa pravidiel typografie, a to: na konci riadku pridajte pomlčku. S týmto dokonale sa vyrovnám mäkký prenos, v HTML kód pre to je špecialista -. Vykonáva rovnakú úlohu ako tag - Nie je viditeľné v obvyklom texte a prenesie slovo na inú líniu, pričom pridávanie pomlčky (príklad 2).

Príklad 2. Mäkký prenos

One-Tsatiliklas-Synitsa Angelica Po ukončení štúdia si vybrala profesiu podnikania spoločnosti.

Výsledok tohto príkladu je znázornený na obr. 2. Všimnite si, aké esteticky a jasnejšie začalo vyzerať ako text v porovnaní s obr. jeden.

Obr. 2. Text s prevodmi slov

Nehnuteľnosť

Na automatizáciu procesu prenosu použite vlastnosť Slovo-Break s prestávkou prestávkou (príklad 3). Pridajte ľubovoľné znaky alebo tagy na HTML už nemusíte mať, každý si vezme štýly.

Príklad 3. Aplikácia Word-Break

Jedenásteho gradiera Angelica po ukončení štúdia si vybrala profesiu manažéra kancelárie.

Výsledok tohto príkladu je znázornený na obr. 3. Pravidlá prevodov textu v tomto prípade sa preto neberú do úvahy, že slová môžu byť prenesené pomerne bizarné.

Obr. 3. Text s prevodmi slov

Zo všetkých uvedených metód "Semi-Hange" pomocou - dáva najlepší výsledok - dodržiavajú pravidlá ruského jazyka, text vyzerá najprv esteticky. Použite ho, keď sa v texte nachádzajú dlhé slová.

Hyphens Nehnuteľnosti

A konečne, najsilnejší a pohodlný majetok na automatické prírastky sú pomlčky. Jeho činnosť je založená na protokoloch zabudovaných do prehliadača, preto dáva najlepší výsledok. Podporované v IE10, Firefoxe, Android a iOS. Chrome a Opera nepodporujú. Ak chcete pracovať všetko, pre tag Pridajte atribút LANG s hodnotou RU (príklad 4).

Príklad 4. Použitie pomlčiek

Jedenásteho gradiera Angelica po ukončení štúdia si vybrala profesiu manažéra kancelárie.

Výsledok tohto príkladu je znázornený na obr. štyri.

Obr. 4. Text s prevodmi slov

Zákaz prevodu

Často je to opačná úloha - zakázať transfery na týchto miestach, kde sú neprijateľné podľa pravidiel. Napríklad nie je možné roztrhnúť jednotku merania z čísla (10 ml), označenie roka (54 pnl), iniciály z priezviska, na rozbitie trvalo udržateľného zníženia (atď.), Prehliadač nepridáva transfery v priestore medzery, mal by byť nahradený nesporným priestorom (príklad 5).

Príklad 5. Použitie

Jazero podľa súradníc 70 ° 58 '19 "p. sh. 97 ° 24 '5 "v. D. Nachádza sa v štvrti Taimer Dolgan-Nenets v Krasnojarskom území Ruska.

V tomto príklade, pre správne písanie súradnice, ktorá neumožňuje preniesť text.