Kääri toiselle riville. Kuinka kääriä css:ssä sanoja, jotka eivät mahdu lohkoon

Määritä, miten siirretään pitkiä sanoja:

  1. vain silloin, kun on välilyönti, välilyönti tai Enter (ei sisällä katkeamatonta välilyöntiä ja välilyöntiä -). Yhden sanan osien väliin kirjoitetaan yhdysviiva (esimerkiksi puna-keltainen) ja sanojen väliin viiva. "Pehmeä tavuviiva" - näkyy vain, kun siirto on tarpeen. Jos sana ylittää vanhemman, niin tai siirtää osan ilman viivaa. Matemaattisissa lausekkeissa käytetään miinusmerkkiä (esimerkiksi 5 − 2). Puhelinnumerot näyttävät numeropalkin (esimerkiksi +7 800 000‒00‒00). Ja kaikki tämä ei ole sama tuttu asia, joka on näppäimistössä.
  2. minkä tahansa hahmon jälkeen.
  3. venäjän kielen sääntöjen mukaan automaattisella tavuviivalla.

ylivuoto-kääre
sanan rivitys
sanakatkos
rivinvaihto
väliviivoja

meidän tuhatyhdeksänsataayhdeksänkymmentäyhdeksän kilomme on jo tarkastettu uudelleen nostin-puskutraktori-kuormaaja

lang="ru"lang="ru">tuhatyhdeksänsataayhdeksänkymmentäyhdeksän on jo tarkastettu uudelleen - kilon repijä-puskutraktori-kuormaaja

Mitä eroa on kiinteistöllä ja toisella?

Oletuksena pitkiä sanoja ei tavuteta, ellei niitä ole nimenomaisesti osoitettu yhdysviivalla, ja ne alkavat uudelta riviltä.

Jotta silmällä välittömästi näkyvät viivat jätettäisiin huomioimatta, lisätään sana-break: keep-all; .

Estä selain kiinnittämästä huomiota pehmeään yhdysviivaan lisäämällä väliviivoja: ei mitään; .

Jos rivitys vaaditaan, niin sanan rivitys: break-word; Suosittelen käyttämään sitä aina, koska kaikki selaimet ymmärtävät sen. Se eroaa sananvaihdosta: break-all; , jolla on etusija, että sanat, jotka eivät mahdu lohkoon, alkavat uudelta riviltä ja pehmeä tavuviivasuositus huomioidaan.

klo jakaminen sana-break: break-all; väliviivalla: auto; , jälkimmäinen jätetään huomiotta. yhdysviivat: auto; Sijoittaa väliviivat oman harkintansa mukaan. Mutta jotta se toimisi, sinun on ilmoitettava kielesi määrittämällä div-attribuutti lang="ru".

Älä kääri sanoja toiselle riville

Oletetaan, että valikon kohta tai painike ei näytä hyvältä, jos se hajoaa. Siksi niiden erottaminen on kiellettävä. Tätä varten kaikki yllä olevat ominaisuudet tulee asettaa oletustilaan ja lisätä. Klikkaa ja katso harjoituskenttäämme.

Ohjaussanan rivitys väliviivojen avulla: auto;

Tetrahydropyranyylisyklopentyylitetrahydropyridopyridiini

Tetrahydropyranypyridino korkea

Usein on tarvetta lisätä uusi kohta, mutta ilman tyhjä rivi, joka lisätään kappaletunnisteeseen

Joidenkin tekstinosien kohdalla tavallinen kappaleväli on yksinkertaisesti sopimaton. Nämä voivat olla kirjoituksia kuvien alla ja taulukoissa, runoja, lainauksia, alaviitteitä ja huomautuksia.

Rivinvaihtojen pakottamiseksi tarjotaan erityinen tunniste, jonka toiminto sisältyy sen nimeen br (break row - "katko rivi, rivi"). Tag
kieli hypertekstimerkintä html tarkoittaa, että kaiken sitä seuraavan sisällön on aloitettava uudelta riviltä. Tarvittaessa voit lisätä useita tunnisteita peräkkäin saadaksesi vaaditun välin.

Tag
kirjainkoolla ei ole merkitystä, eikä se vaadi sulkevaa tunnistetta, koska se tyhjä elementti, mutta on parempi tottua sulkemaan kaikki tunnisteet. XHTML:ssä break-tagi on "suljettava" kenoviivalla.

Esimerkki break-tunnisteen käytöstä

Br-tunniste toiminnassa< /title></p><p><р>Poissaolot työstä</р></p><p><p>Ei missään muualla eikä koskaan <br></p><p>En ollut niin paha <br></p><p>Viranomaiset ovat ahne lauma <br></p><p>Puristaa minut elossa</р></p><p>Poissaolot työstä</p><p>Ei missään muualla eikä koskaan <br>En ollut niin paha. <br>Viranomaiset ovat ahne lauma <br>Pureskelee minua elossa.</p><h2>Tag-attribuutti <br></h2><p>Ainoa ominaisuus, joka sillä on <a href="https://redcomrade.ru/fi/processors/teg-krasnoi-stroki-html-osnovnye-tegi-tegi-html/">html-tunniste</a> <br>, nimeltään Se kertoo selaimelle, mitä tehdä rivinvaihdolla, jos tekstin on kierrettävä ns. kelluvan elementin ympärille, joka voi olla esimerkiksi kuva, jossa on align-attribuutti oikealla/vasemmalla arvoilla, tai lohko CSS:ssä. jolle on määritetty kelluva ominaisuus.</p><p>XHTML 1.0 / HTML 4.01 -määrityksissä clear-attribuuttia voidaan käyttää vain Transitional-, Frameset- ja<!DOCTYPE>, muuten koodi ei toimi.</p><h2>Tunnisteen attribuuttien ominaisuudet</h2><p>Clear-attribuutin vaikutus riippuu sen arvosta ja kelluvan elementin sijainnista. Attribuutilla voi olla 4 arvoa:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>Vasen arvo estää vasemmalle tasatun elementin rivittymisen, joten teksti kompastuu tunnisteen päälle <br>, sijaitsee kuvan tai muun kelluvan elementin alapuolella.</p><p>Täsmälleen sama tulos tulee käyttämällä all-argumenttia, joka ei koskaan salli oikeaa tai vasenta.</p><p>Oikea arvo estää tekstiä kiertymästä oikealle tasatun elementin ympärille, joten tunnisteen jälkeen <br>tekstillä ei ole muuta vaihtoehtoa kuin kiertää kuvaa, virtaamalla sen ympäri oikealle.</p><p>Arvo none ("ei sinun eikä meidän") poistaa yleensä kaikki voimat clear-attribuutista ja tunnisteesta. <br>siirtää riviä hiljaa alaspäin.</p><p>Tunnisteen clear-attribuutilla ei ole sinänsä oletusarvoa.</p><h2>Tag <br>- tämä on pehmeä siirto</h2><p>Rivinvaihtotunniste on erittäin hyödyllinen luotaessa tarvittavat välilyönnit kappaleiden väliin, jolloin sitä käytetään pehmeänä vaihtona, mutta ei keinona jakaa tekstiä kappaleisiin.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>Tekstin muotoilun rivinvaihtotunnisteeseen ei kannata jäädä liikaa, sillä sen käyttö ei aina ole tyylikästä.</p><p>Esimerkiksi jos käytät tunnistetta <br>Jos haluat katkaista rivejä kappaleen sisällä, tämä voi johtaa "kampan" ilmestymiseen käyttäjän ikkunaan, jos se on pienempi kuin verkkovastaavan kohdistama ikkuna.</p> <p>Jatkamme CSS3:n ominaisuuksien tutkimista, ja seuraava on sanan rivitys. Sanojen rivitys on erittäin hyödyllinen ominaisuus, koska se saa tekstin näyttämään mukavammalta sivulla. Joskus on myös tehtävä sarakkeita kuten sanomalehdissä, jolloin oikea tai vasen kohdistus näyttää rumalta. Mutta jos venytät sen koko sarakkeen leveydelle, silmälle on miellyttävämpää lukea tällaista tekstiä. Mutta jopa tässä tapauksessa on sellainen vivahde, kuten suuret välit sanojen välillä, mikä näyttää rumalta. Tämän korjaamme tällä oppitunnilla.</p><p>CSS3:n ominaisuudet:</p><p>Tutkimalla artikkeleita, jotka olen valinnut sinulle yllä, opit myös paljon <a href="https://redcomrade.ru/fi/windows-7/gde-prikleit-zashchitnoe-steklo-na-telefon-funkcii-i-poleznye-svoistva/">hyödyllisiä ominaisuuksia</a> ja oppia myös CSS3:n uusista ominaisuuksista, joiden avulla voit käyttää yhä vähemmän kuvia sivustolla.</p><h2>Luo sanan tavutus</h2><h3>Teksti ilman väliviivoja</h3><p>Jos joku ei ymmärrä mistä puhut <a href="https://redcomrade.ru/fi/power-supply/nikneim-akkaunta-o-kotorom-idet-rech-niki-dlya-igr-chto-takoe/">me puhumme</a>, tässä on esimerkki ilman rivitystä:</p><h3>Tavuviivojen kanssa</h3><p>Ja tässä on esimerkki, kun käytämme siirtoa <a href="https://redcomrade.ru/fi/monitors/svoistva-css-intervaly-str-1-mezhsimvolnyi-mezhstrochnyi-interval-css/">CSS-sanat</a>:</p><h3>Viileä! Miten tämä tehdään koodissa?</h3><p>Nyt luulen kaikkien ymmärtävän erittäin hyvin, mitä teemme. Joten on aika oppia CSS3:n uudesta ominaisuudesta!</p><p>Ja tämä ominaisuus on kirjoitettu näin - tavuviivat.</p><p>Yksinkertaista, eikö? Mutta jokaisella selaimella on omat etuliitteensä, joten koodissa se näyttää tältä:</p><p>Älä unohda venyttää tekstiä koko lohkon leveydelle käyttämällä <a href="https://redcomrade.ru/fi/security/kakie-znacheniya-mozhet-prinimat-svoistvo-text-align-html-vyravnivanie-teksta-po/">tekstin tasausominaisuudet</a>: perustele, muuten <a href="https://redcomrade.ru/fi/windows-7/kak-vyigrat-v-rozygryshe-repostov-konkursy-vkontakte-kak/">haluttu tulos</a> et näe.</p> <p>Ei vain ihmisiä, vaan myös sanoja voi olla vaikea kestää. Esimerkiksi kemiallinen yhdiste on hyvin samanlainen kuin jotkut ihmiset, joilla on " <i>kumoutunut</i>"! Emme tiedä kuinka käsitellä niin vaikeita persoonallisuuksia, mutta CSS auttaa ehdottomasti sanojen rivityksessä:</p><h2>Miksi kestää "siestämätöntä"</h2><p>Useimmissa tapauksissa tekstisisältöä näytettäessä verkkosivuilla selaimessa rivitystä ei käytetä. Jos sana ei mahdu kokonaan näyttöalueelle, se on oletuksena kokonaan " <i>liikkuu</i>"seuraavalle riville.</p><p>Osittainen tavutus koskee vain pitkiä, monimutkaisia ​​sanoja, jotka sisältävät useita termejä ja jotka on erotettu yhdysviivalla. Tässä syntyy ongelmia näiden sanojen näyttämisessä eri diagonaalisilla näytöillä ja sisäänpäin <a href="https://redcomrade.ru/fi/security/chto-takoe-kuki-dlya-chego-oni-nuzhny-kak-ochishchat-cookies-v-brauzere-kak/">eri selaimet</a>. Samalla ennusta tarkasti, kuinka pitkä sana on " <i>Katso</i>"se on vaikeaa asiakkaan puolella, joten yhdysviivojen määritteleminen" <i>käsin</i>"ei mitään järkeä:</p><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_1.png' width="100%" loading=lazy loading=lazy></p><h3>Sanojen rivitysongelman ratkaiseminen HTML:llä</h3><p>Ennen kuin tarkastelemme pitkien sanojen käärimistä CSS:ään, tutkitaan kuinka hypertekstikieli voi ratkaista tämän ongelman. <br>HTML:ssä on tähän useita vaihtoehtoja: <br></p><ul><li><span>Pehmeän tauon symbolin käyttäminen -</span>- voit asettaa tauon sijainnin <a href="https://redcomrade.ru/fi/case/chto-takoe-aktiv-direktori-active-directory-chto-eto-prostymi/">yhdyssana</a>. Kun selainikkunan kokoa muutetaan <a href="https://redcomrade.ru/fi/the-winchesters/gde-nastroit-krasnuyu-stroku-v-vorde-chtoby-sdelat-krasnuyu/">seuraava rivi</a> Vain ­:n jälkeinen osa pitkästä sanasta on tavoitettu, ja ensimmäisen puoliskon jälkeen näkyy yhdysviivamainen yhdysmerkki:</li> </ul> <body> <p>Esimerkki monimutkaisesta kemiallisesta yhdisteestä ja tekstistä - metyylipropenyleenidihydroksi-sykinamenyyliakryylihappo</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> <p><img src='https://i2.wp.com/sdteam.com/articles/img/22687_2.png' width="100%" loading=lazy loading=lazy></p><ul><li><span>Tunnisteen käyttäminen - elementti esiintyi HTML 5:ssä</span>. Se myös kertoo selaimelle, missä monimutkainen tai pitkä sana katkeaa. Mutta toisin kuin edellinen erikoismerkki, tämä tunniste ei näy paikassa " <i>vika</i>» tavutus, joka voi vaikuttaa negatiivisesti koko tekstin luettavuuteen:</li> </ul> <style type="text/css"> wbr { display: inline-block; } </style> </head> <body> <p>metyylipropenyleeni <wbr>dihydroksicinna <wbr>menyyliakryylihappo</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> <p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_3.png' width="100%" loading=lazy loading=lazy></p><p>Jotkut selaimet tukevat tunnistetta <wbr>toteutettu väärin. Se toimii niissä, jos sille on CSS-koodissa määritetty näyttöominaisuus, jonka arvo on inline-block.</p><h3>Sanojen rivitys CSS:llä</h3><p>Ennen kuin poistamme sanan rivityksen käytöstä CSS:ssä, tarkastellaan muutamia ominaisuuksia, jotka voivat ratkaista pääongelman:</p> <ol><li>sanan rivitys – kuvaa, kuinka rivitetään sanoja, jotka eivät mahdu sanan pituuteen <a href="https://redcomrade.ru/fi/video-cards/kak-ustanovit-razmer-stranicy-kak-ustanovit-razmer-stranicy-kak-uvelichit/">vakiintuneet mitat</a> kontti. Kannattaa heti varoittaa, että tämän ominaisuuden validoinnissa on ongelmia, eikä W3C-konsortio ole vielä päättänyt tuensa käyttöönotosta CSS:ssä. Siksi erikoistuneet validaattorit luovat virheen, jos koodissa on rivitys:</li> </ol><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_4.png' width="100%" loading=lazy loading=lazy></p><p>Kaikki kuitenkin "näkevät" tämän ominaisuuden <a href="https://redcomrade.ru/fi/ram/chto-takoe-internet-brauzer-obshchie-ponyatiya-i-rabota-sovremennyh/">nykyaikaiset selaimet</a> ja on <a href="https://redcomrade.ru/fi/motherboard/mercaet-ekran-na-noutbuke-effektivnye-sposoby-resheniya-problemy-polnyi/">tehokas ratkaisu</a> ongelmia pitkien sanojen tavutuksessa. sanan rivitys saa seuraavat arvot: <br></p><ul><li>normaali – sanoja ei tavuteta;</li><li>taukosana <a href="https://redcomrade.ru/fi/multimedia/word-udalit-perenosy-strok-upravlenie-avtomaticheskimi-i-obychnymi/">automaattinen siirto</a> sanat;</li><li>perii – perii vanhemman arvon.</li> </ul><p>Esimerkki tämän ominaisuuden käytöstä:</p><p> <style type="text/css"> .container{ background-color: rgb(204,204,204); padding:10px; width:200px; } .content{ word-wrap: break-word; } </style> </head> <body> <div class="container"> <p class="content">metyylipropenyleenidihydroksikanemyyliakryylihappo</p> </div> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_5.png' width="100%" loading=lazy loading=lazy></p><p>IN <a href="https://redcomrade.ru/fi/processors/intel-core-i7-types-of-cores-new-memory-for-ssd/">uusi spesifikaatio</a> CSS-ominaisuus word-wrap on nimetty uudelleen overflow-wrap . Molemmat kiinteistöt hyväksyvät <a href="https://redcomrade.ru/fi/graphics-card/avtozapolnenie-yacheek-v-excel-ne-rabotaet-avtozapolnenie-form-kak-v-excel-zapolnit/">samat arvot</a>. Mutta ylivuoto-kääretuki on edelleen huonosti toteutettu, joten sitä on parempi käyttää <a href="https://redcomrade.ru/fi/graphics-card/skachat-staryi-skaip-vse-starye-versii-skype-kak-vernut-staruyu-versiyu-skype-dlya/">vanha versio</a> ominaisuudet:</p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_6.png' width="100%" loading=lazy loading=lazy></p><p>Kuten yllä olevasta kuvakaappauksesta näet, uutta ominaisuutta tuetaan <a href="https://redcomrade.ru/fi/processors/chto-delat-esli-ne-zapuskaetsya-brauzer-google-chrome-esli-google-chrome-ne/">Google Chrome</a>, mutta sitä ei tueta IE:ssä. Siksi on parempi olla käyttämättä ylivuodon rivitystä sanojen rivityksessä CSS:ssä. <br></p><ol><li>word-break – asettaa säännöt katkoviivalle säiliön sisällä, jos ne eivät mahdu siihen leveydeltä. Tämä on uusi ominaisuus ja tuki sille on otettu käyttöön CSS3:ssa. Se on kelvollinen, mutta se on suunniteltu toimimaan merkkijonojen kanssa, joten rivitys voi olla kieliopillisesti virheellistä.</li> </ol><p>Omaisuus saa kolme arvoa: <br></p> <ul><li>normaali – oletussiirtosääntöjä käytetään;</li><li>sananvaihto – rivinvaihdot suoritetaan automaattisesti, jotta sana mahtuu määritettyyn säilön leveyteen;</li><li>säilytä kaikki – poistaa automaattisen sanan tavutuksen käytöstä kiinan, japanin ja korean kielellä. Muilla kielillä arvon vaikutus on samanlainen kuin normaali.</li> </ul><p> <style> .content { font-size: 30px; background: rgb(51,204,153); width: 170px; padding: 10px; word-break:break-all; } </style> </head> <body> <div class="content"> <p>Synkrofasotron</p> <p>Huolestunut tila</p> <p>Yhdestoista luokkalainen</p> <p>metoksiklooridietyyliaminometyylibutyyliamiini</p> </div> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_7.png' width="100%" loading=lazy loading=lazy></p><ol><li>tavuviivat on uusi ominaisuus, joka otettiin käyttöön CSS3:n julkaisun myötä. Se määrittää, kuinka selain käsittelee tekstin rivittämistä. Kiinteistö hyväksyy useita arvoja:</li> </ol><ul><li>ei mitään – poistaa sanan rivityksen CSS:ssä käytöstä;</li><li>manuaalinen( <i>oletusarvo</i>) – sanat rivitetään niille tekstilohkon alueille, joissa tämä on määritetty tunnisteella <wbr>tai <a href="https://redcomrade.ru/fi/multimedia/myagkii-perenos-v-vorde-sochetanie-klavish-kinogo-goryachie-klavishi/">pehmeä siirto</a> (-) ;</li><li>auto – selain rivittää sanat automaattisesti asetustensa perusteella.</li> </ul><p>varten <a href="https://redcomrade.ru/fi/case/pochemu-ne-zagruzhayutsya-igrovye-dannye-v-bluestacks-ispravlyaem-problemy-zapuska-bluestacks/">oikea toiminta</a> ominaisuudet tunnisteessa <html>tai <p>Attribuutissa lang on oltava arvo "ru" (lang="ru").</p><p>Tuettu omaisuus <a href="https://redcomrade.ru/fi/internet/opengl-poslednyaya-versiya-opengl-poslednyaya-versiya-opengl-poslednyaya-versiya/">uusimmat versiot</a> IE, Opera ja Firefox. Jokaisella niistä on omansa <a href="https://redcomrade.ru/fi/the-winchesters/kak-sdelat-otstup-mezhdu-strokami-v-html-izmeniv-rasstoyanie/">CSS-linja</a>. Google Chrome ei tue yhdysmerkkejä. Esimerkki:</p><p> <style type="text/css"> .container{ background-color: rgb(153,255,204); padding:10px; width:200px; } .content{ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } </style> </head> <body> <div class="container"> <p class="content" lang="ru">metyylipropenyleenidihydroksikanemyyliakryylihappo</p> </div> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_8.png' width="100%" loading=lazy loading=lazy></p><h3>Sanojen tavutuksen kielto</h3><p>Joskus sinun on varmistettava, että koko rivi näkyy ilman taukoa. Sanan rivityksen kieltäminen CSS:ssä voidaan toteuttaa useilla tavoilla: <br></p><ul><li>Käyttämällä <a href="https://redcomrade.ru/fi/internet/kak-ustanovit-nerazryvnyi-probel-nerazryvnyi-probel-v/">rikkoutumaton tila</a>  , joka asennetaan rivin- tai sananvaihtoon;</li><li>Asettamalla omaisuutta <i>tyhjä tila</i> tarkoittaa" <i>nowrap</i>» ( <i>välilyönti: nowrap</i> ).</li> </ul><p>Esimerkki toteutuksesta:</p><p> <style type="text/css"> .container{ background-color: rgb(153,255,204); padding:10px; width:200px; } .content{ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } .nowrap { white-space: nowrap; } </style> </head> <body> <div class="container"> <p>metyylipropenyleenidkertaa</p> <p class="content" lang="ru">metyylipropenkaksi</p> <p class="nowrap">metyylipropenyleentri</p> <p>metyylipropenyleentetra</p> </div> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </p><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_9.png' width="100%" loading=lazy loading=lazy></p><p>Nyt voit siirtää osoitteesta <a href="https://redcomrade.ru/fi/case/neskolko-sovetov-kak-pri-pomoshchi-css-ubrat-podcherkivanie-ssylok-v-html-kak-cherez/">CSS:n avulla</a> pisimmätkin sanat. Mutta joudut itse käsittelemään vaikeasti siedettävien ihmisten ongelmaa. Yritä vaikuttaa niihin CSS-menetelmillä</p> <p>Asetteluja tehdessään webmasterilla on ajoittain kysymys: kuinka teksti siirretään? Useimmissa tapauksissa selain hoitaa tämän tehtävän itse. Mutta joskus tämä prosessi on otettava hallintaan, varsinkin kun muotoillaan pitkiä sanoja ja lauseita, jotka väärin käännettyinä menettävät merkityksensä.</p> <h2>rivitysominaisuus</h2> <p>HTML:ssä on erityinen tagi rivien erottamiseksi <br>. Mutta sen liian toistuvaa käyttöä pidetään huonona käytöksenä kehittäjien keskuudessa ja se on usein merkki epäammattimaisuudesta. Todisteeksi kuvittele, että sinulla on logo ja haluat jokaisen kirjaimen alkavan uudelta riviltä:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sanojen uudelleenmuotoilun tarkistaminen

Tuloksena on hankala ja ruma koodi, joka aiheuttaa kulttuurishokin jokaiselle kehittäjälle. Ja mitä sinun pitäisi tehdä, jos haluat logon olevan vaaka-asennossa työpöytäversiossa ja pystysuorassa, jos näytön leveys on alle 550 pikseliä? Siksi konfiguroida ulkonäkö elementit käyttävät aina peräkkäisiä tyylisivuja. Varsinkin työkalujen avulla CSS-siirto jouset on tehty tyylikkäämmällä tavalla. Tässä tapauksessa ei ole ylimääräistä merkintää, mikä vain vähentää sivun latausnopeutta.

Ensimmäinen ominaisuus, jota sinun tulee käyttää tekstinkäsittelyä varten, on rivitys. Hyväksyy kolme arvoa: normaali, break-all ja keep-all. Jotta voit työskennellä, sinun tarvitsee vain muistaa katkaisu. Normaali on oletusarvo, eikä sitä kannata määritellä. Pidä kaikki sisällä CSS-dokumentti rivikatkojen kielto. Suunniteltu erityisesti kiinalaisille, japanilaisille ja korealaisille hahmoille. Siksi, jos et aio kirjoittaa blogia jollakin näistä kielistä, kiinteistö ei ole sinulle hyödyllinen. Ja sitä ei myöskään tueta Safari selain Ja matkapuhelimia iOS:n perusteella.

Siirrettävän logon määrittäminen edellisestä esimerkistä uusi rivi jokaiseen kirjaimeen sinun on kirjoitettava seuraava koodi:

P(fontti: lihavoitu 30px Helvetica, sans-serif; leveys: 25px; rivitys: break-all; )

Fontin leveys ja koko valitaan siten, että tilaa riittää vain yhdelle kirjaimelle. Sanan rivitys, jonka arvo on break-all, kertoo selaimen jakavan sanan uudelle riville joka kerta. Tätä ominaisuutta ei voida kutsua korvaamattomaksi. Mutta siitä on hyötyä, kun suunnitellaan pieniä tekstilohkoja, kuten kenttiä kommenttien syöttämiseen.

tyhjä tila

Uusien verkkokehittäjien yleinen virhe on yrittää muokata tekstiä välilyönnillä tai napsautuksella. Syötä avaimet, ja sitten ihmettelevät, miksi heidän ponnistelunsa eivät näy sivulla. Riippumatta siitä, kuinka monta kertaa painat Enteriä, selain jättää sen huomioimatta. Mutta on olemassa tapa saada se näyttämään teksti haluamallasi tavalla ottaen huomioon kaikki välit.

CSS-dokumentissa välilyöntiominaisuuden avulla määritetyt rivinvaihdot voidaan määrittää kunnioittamaan välilyöntejä tai Enter-näppäinpainalluksia. Välilyönti arvon esirivin kanssa pakottaa selaimen näkemään Enter tekstissä.

Sanojen uudelleenmuotoilun tarkistaminen

Jos vaihdat CSS-koodin esirivin esiriviksi, rivinvaihto ottaa huomioon välilyönnit. Ja päinvastoin, estä rivitys määrittämällä tekstille välilyöntiominaisuus, jonka arvo on nowrap:

#wrapper p( väri: #FFF; täyte: 10px; fontti: lihavoitu 16px Helvetica, sans-serif; välilyönti: nowrap; )

Tekstin ylivuoto

Toinen hyödyllinen työkalu tekstin kanssa työskentelyyn - tämä on tekstin ylivuoto. Rivinvaihtojen lisäksi CSS-ominaisuuden avulla voit leikata sisältöä, kun säiliö on täynnä. Ottaa kaksi arvoa:

  • clip - yksinkertaisesti leikkaa tekstiä;
  • ellipsi - lisää ellipsin.
#wrapper p( väri: #FFF; täyttö: 10px; fontti: lihavoitu 16px Helvetica, sans-serif; text-overflow: ellipsi; /*Lisää ellipsi*/ välilyönti: nowrap; /* Poista rivin rivitys käytöstä */ ylivuoto : piilotettu;/*Piilota kaikki, mikä menee kontin ulkopuolelle*/ )

Jotta ominaisuus toimisi, elementti on myös asetettava estämään rivinvaihdot ja ylivuoto, kun arvo on piilotettu.