Az elrendezés során a webmestereknek időnként felmerül a kérdésük: hogyan lesz tördelve a szöveg? A legtöbb esetben a böngésző önállóan kezeli ezt a feladatot. De néha ezt a folyamatot kézbe kell venni, különösen hosszú szavak és kifejezések alakításakor, amelyek helytelen átvitel esetén értelmüket vesztik.
szótörlő tulajdonság
A HTML-ben van egy speciális címke a sorok elválasztására.
. De túl gyakori használata rossz formának számít a fejlesztők körében, és gyakran szakszerűtlenségre utal. Ennek bizonyítékaként képzelje el, hogy van egy logója, és szeretné, hogy minden betű új sorban kezdődjön:
Az eredmény egy nehézkes és csúnya kód, amitől minden fejlesztő kultúrsokkot kap. És mi van akkor, ha azt szeretné, hogy a logó vízszintesen jelenjen meg az asztali változaton, de függőlegesen, ha a képernyő szélessége kisebb, mint 550 képpont? Ezért mindig használjon lépcsőzetes stíluslapokat az elemek megjelenésének testreszabásához. Sőt, a CSS eszközök segítségével a sortörések is elegánsabb módon valósulnak meg. Ugyanakkor nincs redundáns jelölés, ami csak az oldalak betöltésének sebességét csökkenti.
Az első tulajdonság, amelyet a szövegfeldolgozás során figyelembe kell venni, a tördelés. Három értéket vesz igénybe: normál, mindent megszakító és mindent megtart. Csak emlékeznie kell a munkavégzésre. A normál az alapértelmezett, és nincs értelme megadni. A Keep-all eszköz a sortörések megelőzésére a CSS-dokumentumban. Kifejezetten kínai, japán és koreai karakterekhez tervezték. Tehát ha nem fog blogot írni egyik nyelven sem, akkor nem lesz szüksége a funkcióra. Nem támogatja a Safari böngésző és az iOS mobiltelefonok sem.
Ha az előző példa logójához CSS-t használva szeretne minden betűhöz új sort rendelni, akkor a következő kódot kell beírnia:
P( betűtípus: félkövér, 30 képpont Helvetica, serif nélkül; szélesség: 25 képpont; tördelése: break-all; )
A betűszélesség és -méret úgy van megválasztva, hogy csak egy betű számára legyen elegendő hely. A break-all értékkel rendelkező szótördelés azt mondja a böngészőnek, hogy minden alkalommal új sorba törje be a szót. Ez a tulajdonság nem nevezhető pótolhatatlannak. De hasznos lesz kis szöveges blokkok, például megjegyzésmezők tervezésekor.
white space ingatlan
A kezdő webfejlesztők gyakori hibát követnek el, hogy szóközökkel próbálják szerkeszteni a szöveget, vagy lenyomják az Enter billentyűt, majd azon tűnődnek, hogy erőfeszítéseik miért nem jelennek meg az oldalon. Nem számít, hányszor nyomja meg az "Enter" gombot, a böngésző figyelmen kívül hagyja. De van mód arra, hogy úgy jelenítse meg a szöveget, ahogyan szeretné, és figyelembe veszi az összes szóközt.
A CSS-dokumentumban a szóköz tulajdonsággal hozzárendelt sortörések beállíthatók a szóközök tiszteletben tartására vagy az Enter billentyű lenyomására. A sor előtti értékű szóköz hatására a böngésző Entert fog látni a szövegben.
Ha a CSS-kódban az elősort előtördelésre változtatja, a sortörés szóközöket fog tartalmazni. Ezzel szemben tiltsa le a tördelést úgy, hogy a white-space tulajdonságot a nowrap értékű szövegre állítja:
#wrapper p( szín: #FFF; kitöltés: 10px; betűtípus: félkövér 16px Helvetica, serif nélkül; szóköz: nowrap; )
szöveg-túlcsordulás
A szöveggel való munka másik hasznos eszköze a text overflow. A sor tördelése mellett a CSS tulajdonság lehetővé teszi a tartalom kivágását, amikor a tároló megtelt. Két értéket vesz fel:
- klip – csak levágja a szöveget;
- ellipszis – egy ellipszist ad hozzá.
A tulajdonság működéséhez az elemet úgy is be kell állítani, hogy megakadályozza a sortöréseket és a rejtett értékű túlcsordulást.
rövid tájékoztatás
CSS verziók
| css 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Leírás
A white-space tulajdonság beállítja, hogyan jelenítse meg a szóközöket a szavak között. Normál körülmények között a HTML-kód tetszőleges számú szóköze egyként jelenik meg a weboldalon. A kivétel a címke
Az ebbe a tárolóba helyezett szöveg minden szóközzel úgy jelenik meg, ahogyan azt a felhasználó formázta. Tehát a szóköz a címke működését utánozzaDe ezzel ellentétben nem változtatja a betűtípust monospace-re.Szintaxis
szóköz: normál | nowrap | pre | elősor | előcsomagolás | örököl
Értékek
normál A böngészőablakban a szöveg a megszokott módon jelenik meg, a sortörések beállítása automatikusan történik. nowrap A szóközöket figyelmen kívül hagyja, a HTML kód sortöréseit figyelmen kívül hagyja, az összes szöveg egy sorban jelenik meg; azonban a címke hozzáadásával
új sorba tördeli a szöveget. pre A szöveg minden szóközzel és kötőjellel együtt jelenik meg, ahogyan azokat a fejlesztő hozzáadta a HTML-kódhoz. Ha a sor túl hosszú ahhoz, hogy elférjen a böngészőablakban, egy vízszintes görgetősáv kerül hozzáadásra. sor előtti A szóközöket nem veszik figyelembe a szövegben, a szöveg automatikusan a következő sorba kerül, ha nem fér el a megadott területen. előtördelése Minden szóköz és kötőjel megmarad a szövegben, de ha a sor szélessége nem fér bele a megadott területbe, akkor a szöveg automatikusan a következő sorba kerül. inherit A szülő értékét örökli.Az értékek szövegre gyakorolt hatását a táblázat mutatja be. egy.
HTML5 CSS2.1 IE Cr Op Sa Fx
fehér űr Példa
Fermat utolsó tétele
x n+Y n=Z n
ahol n egy 2-nél nagyobb egész számEnnek a példának az eredménye az ábrán látható. egy.
Rizs. 1. A white-space tulajdonság alkalmazása
Objektummodell
document.getElementById("elementID ").style.whiteSpace
Böngészők
Az Internet Explorer a 7.0-s verzióig nem támogatja a pre-line , pre-wrap és inherit értékeket. Mert