Css a lógó vonalakkal és szünetekkel dolgozom

W jelentése lógó vonalak és szünetek

A lógó karakterlánc a bekezdés vagy a cím végén egy szót ír le.

Az ilyen szavak akkor jelennek meg, ha a sor utolsó mondata egy újhoz ugrik, mert nem illeszkedik a szélességhez.
Sokkal jobb, ha legalább két szó van az utolsó sorban. Az emberek gyakran nem akarnak egyetlen szót sem hagyni a vonalon. Az ügynökség, amellyel dolgozott, megközelítette ezt a kérdést olyan pedáns módon, hogy rögeszmés vágyam volt újra megvizsgálni nem annyira a szöveget, mint a szalagcímeket a felfüggesztési vonalak hiányában.

Az alábbiakban néhány tippet adtam a függővonalak eltávolításához és a vonalszakaszok kezeléséhez.

Ne próbálja meg használni a br tételt, hogy kényszerítsen egy sortörést

HTML-címke használatával kényszeríthetjük a sortörést és áthelyezhetjük a szöveget egy új sorra.

Css a lógó vonalakkal és szünetekkel dolgozom

Gyakorlati kurzus az adaptív leszállásról a semmiből!

Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban

Nagyméretű képernyőkön ez a fejléc szépnek tűnhet, de ha kinyitod az oldalt egy kis képernyőn, akkor a vonalszakadás kellemetlen helyen lehet, ami elrontja a fejlécet. Például:

Ez akkor történhet, ha a vonal szélessége elegendő csak a "Ez egy hosszú cím, amely". A "kell" szó tehát egy új vonalra ugrik, amely után egy kényszeres szünetet fognak felállítani, ami egy újabb sorba "egy új sorba ebbe a helyre" lépne. Nem túl kellemes.

Ne használja a br-címkét behúzóként

Nagyon gyakran látom, hogyan csinálják a diákok. Csak megtanulják használni a HTML-t, és néhány elemet el akarnak távolítani egymástól. Adjon további párnázatot a fejlécek tetején, nagyobb helyet a szakaszok vagy bekezdések között stb.

A br tagek használatával üres sorokat adhat hozzá, amelyek helyettesítik a behúzókat, de a behúzást mindig a CSS-ben kell beállítani. A margin tulajdonság sokkal több lehetőséget kínál, mint br. A HTML tartalma, nem pedig stílusok.

Mikor használhatom a br tageket?

Ez ellentmond a kijelentésnek, hogy nem használhatsz vonalszakaszt a stílusokhoz? Talán.

A sor törlése a kijelzővel: nincs

A br tag láthatatlan (csak a sztringet fordítja le). Nem rendelkezik vizuális jellemzőkkel: nem látható, nincs mérete, alakja, színe vagy bármi más.

De hozzáadhat egy osztályt a sortöréshez, hogy szabályozhassa a fordítást egy új sorra a megjelenítési tulajdonság használatával.
Ha beállítja a kijelzőt: nincs, a vonalbontás megszűnik. És ha a kijelzőt: blokkot állítja be, egy szünet jelenik meg. Néha hasznos lehet párosítani a média lekérdezésekkel, hogy bizonyos képernyőkön hozzáfűzzön és eltávolítson vonalszakadást.

A fenti kód eltávolítja a szöveget a kis képernyőkön, és nagy képernyőkön megjelenik a rés, és a szerzői jog szövegét két sorba építik fel.

használat   a felfüggesztett vonalak rugalmas eltávolításához

Térjünk vissza oda, ahol elkezdtük ezt a cikket. Ha egy címke használatával kényszerít egy sortörést
lehetetlen, akkor mi lehetséges?

Egy rugalmasabb módszer az, ha két szót egy szünet nélkül egyesít. Akkor a szöveg szép lesz. Vegyük az alábbi jelölést:

A "sztring" és az "itt" szavak között megkülönböztethetetlen hézagot adtam hozzá, mert két szó egyformán viselkedik.
Ha a képernyő széles, a fejléc egy vonalra illeszkedik, és minden jól néz ki.

Ha a képernyő szélessége csökken, akkor a legközelebbi töréspont az "új" szó és a "string here" szövegrész között lesz. Ez azt jelenti, hogy ha nincs elég hely, egy sortörés kerül beillesztésre, ami az utolsó két szót áthelyezi a második sorra. Nincs lógó vonal, minden jól néz ki.

Meg akarja próbálni ezt a technikát? Nyissa meg a böngésző fejlesztői paneljét, és ellenőrizze az oldal fejlécét. Csökkentheti az ablak szélességét, és megnézheti, hogyan viselkednek a szavak az egyes fejlécekben.

Kiadás: A webformyself parancs.

Css a lógó vonalakkal és szünetekkel dolgozom

Gyakorlati kurzus az adaptív leszállásról a semmiből!

Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban

A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán

Css a lógó vonalakkal és szünetekkel dolgozom

Gyakorold a HTML5 és a CSS3-at a semmiből az eredményhez!

Kapcsolódó cikkek