HTML žyma, kurią reikia perkelti į naują eilutę. Kaip apvynioti tekstą langelyje programoje „Excel“.

Išdėstydami žiniatinklio valdytojams periodiškai kyla klausimas: kaip bus suvyniotas tekstas? Daugeliu atvejų naršyklė pati susidoroja su šia užduotimi. Tačiau kartais šį procesą tenka suvaldyti, ypač formuojant ilgus žodžius ir frazes, kurios, perkeltos neteisingai, praranda prasmę.

žodžių vyniojimo savybė

HTML yra speciali žyma, skirta atskirti eilutes.
. Tačiau per dažnas jo naudojimas kūrėjams laikomas bloga forma ir dažnai rodo neprofesionalumą. Kaip įrodymą įsivaizduokite, kad turite logotipą ir norite, kad kiekviena raidė prasidėtų nauja eilute:

Žodžių lūžių tikrinimas

Rezultatas yra sudėtingas ir bjaurus kodas, nuo kurio bet kuris kūrėjas patirs kultūrinį šoką. O ką daryti, jei norite, kad darbalaukio versijoje logotipas būtų rodomas horizontaliai, bet vertikaliai, jei ekrano plotis mažesnis nei 550 pikselių? Todėl visada naudokite pakopinio stiliaus lapus, kad pritaikytumėte elementų išvaizdą. Be to, naudojant CSS įrankius, eilučių pertraukos atliekamos elegantiškiau. Tuo pačiu metu nėra perteklinio žymėjimo, kuris tik sumažina puslapių įkėlimo greitį.

Pirmoji ypatybė, į kurią reikia atkreipti dėmesį apdorojant tekstą, yra žodžių vyniojimas. Tam reikalingos trys reikšmės: normalus, break-all ir keep-all. Jums tereikia atsiminti, kad norint dirbti, reikia pertraukos. Normalus yra numatytasis ir nėra prasmės jo nurodyti. Išsaugoti visas priemones, kad CSS dokumente būtų išvengta eilučių lūžių. Sukurta specialiai kinų, japonų ir korėjiečių rašmenims. Taigi, jei neketinate rašyti tinklaraščio nė viena iš tų kalbų, šios funkcijos jums nereikės. Jo taip pat nepalaiko „Safari“ naršyklė ir „iOS“ mobilieji telefonai.

Norėdami priskirti naują eilutę kiekvienai raidei logotipui iš ankstesnio pavyzdžio naudodami CSS, turite parašyti šį kodą:

P(šriftas: paryškintas 30 piks. Helvetica, sans-serif; plotis: 25 piks.; perversmas: break-all; )

Šrifto plotis ir dydis parenkamas taip, kad vietos užtektų tik vienai raidei. Žodžių vyniojimas su reikšme break-all nurodo naršyklei kiekvieną kartą įterpti žodį į naują eilutę. Ši savybė negali būti vadinama nepakeičiama. Bet tai bus naudinga kuriant mažus blokelius su tekstu, pavyzdžiui, komentarų laukus.

baltos erdvės nuosavybė

Dažna pradedančiųjų žiniatinklio kūrėjų klaida yra bandymas redaguoti tekstą su tarpais arba paspausti Enter klavišą, o paskui stebisi, kodėl jų pastangos nepasirodo puslapyje. Nesvarbu, kiek kartų paspausite „Enter“, naršyklė to nepaisys. Tačiau yra būdas padaryti, kad tekstas būtų rodomas taip, kaip norite, ir atsižvelgti į visus tarpus.

CSS dokumente eilučių lūžiai, priskirti tarpo ypatybei, gali būti sukonfigūruoti taip, kad būtų laikomasi tarpų arba paspaudus klavišą Enter. Paspaudus tarpą su pradinės eilutės reikšme, naršyklė tekste matys Enter.

Žodžių lūžių tikrinimas

Jei CSS kode pradinę eilutę pakeisite į išankstinę eilutę, eilutės apvyniojime bus tarpų. Ir atvirkščiai, išjunkite bet kokį įvyniojimą, nustatydami tarpo ypatybę tekstui, kurio reikšmė yra nowrap:

#wrapper p (spalva: #FFF; užpildymas: 10 piks.; šriftas: paryškintas 16 piks. Helvetica, be serifo; tarpas: be įvyniojimo; )

teksto perpildymas

Kitas naudingas įrankis dirbant su tekstu yra teksto perpildymas. Be eilučių apvyniojimo, CSS ypatybė leidžia apkarpyti turinį, kai konteineris pilnas. Turi dvi vertes:

  • klipas – tiesiog nupjauna tekstą;
  • elipsė – prideda elipsę.
#wrapper p(spalva: #FFF; užpildymas: 10px; šriftas: paryškintas 16px Helvetica, sans-serif; teksto perpildymas: elipsė;/*Pridėti elipsę*/ tarpas: nowrap; /* Išjungti eilučių vyniojimą */ perpildymas : paslėptas;/*Paslėpti viską, kas yra už konteinerio ribų*/ )

Kad ypatybė veiktų, elementas taip pat turi būti nustatytas taip, kad būtų išvengta linijos lūžių ir perpildymo, kai reikšmė yra paslėpta.

trumpa informacija

CSS versijos

css 1 CSS 2 CSS 2.1 CSS 3

apibūdinimas

Balto tarpo ypatybė nustato, kaip rodyti tarpus tarp žodžių. Įprastomis aplinkybėmis bet koks tarpų skaičius HTML kode tinklalapyje bus rodomas kaip vienas. Išimtis yra žyma

Į šį konteinerį įdėtas tekstas rodomas su visais tarpais taip, kaip jį suformatavo vartotojas.  Taigi tarpas imituoja žymos veikimą 
Tačiau skirtingai nei jis, jis nekeičia šrifto į monospace.

Sintaksė

tarpas: normalus | nowrap | prieš | išankstinė eilutė | išankstinis įvyniojimas | paveldėti

Vertybės

normalus Tekstas naršyklės lange rodomas kaip įprasta, eilučių lūžiai nustatomi automatiškai. nowrap Tarpai ignoruojami, eilučių lūžiai HTML kode ignoruojami, visas tekstas rodomas vienoje eilutėje; tačiau pridedant žymą
perkelia tekstą į naują eilutę. iš anksto Rodomas tekstas, įskaitant visus tarpus ir brūkšnelius, kuriuos kūrėjas įtraukė į HTML kodą. Jei eilutė per ilga, kad tilptų naršyklės lange, bus pridėta horizontali slinkties juosta. prieš eilutę Į tarpus tekste neatsižvelgiama, tekstas automatiškai perkeliamas į kitą eilutę, jei netelpa nurodytoje srityje. pre-wrap Visi tarpai ir brūkšneliai tekste išsaugomi, bet jei eilutės plotis netelpa į nurodytą sritį, tekstas automatiškai perkeliamas į kitą eilutę. inherit Paveldi tėvo vertę.

Vertybių poveikis tekstui pateiktas lentelėje. vienas.

HTML5 CSS2.1 IE Cr Op Sa Fx

balta vieta

Pavyzdys

Paskutinė Ferma teorema
X n+Y n= Z n
kur n yra sveikas skaičius > 2

Šio pavyzdžio rezultatas parodytas fig. vienas.

Ryžiai. 1. Taikant tarpo savybę

Objekto modelis

document.getElementById("elementID ").style.whiteSpace

Naršyklės

„Internet Explorer“ iki 7.0 versijos imtinai nepalaiko išankstinės eilutės, išankstinio įvyniojimo ir paveldėjimo verčių. Dėl