Ellipszis végén egy sor révén css, az ingatlan text-overflow ellipszis
Hogy néha irritálja a hosszú link nevét áruk - három sor - vagy a hosszú címek más blokkok. Jó lenne, ha lehetne az egészet valahogy priuzhat hogy kompakt. És ha lebeg az egér már azt mutatják, cím teljesen.
Ehhez jön, hogy a támogatás a kedvenc CSS. Ez nagyon egyszerű, nézd.
Tegyük fel, hogy van itt egy saroknyira a katalógusban szereplő áruk:
Miracle Yudo silopridavatel este, titokzatos, art. 20255-59
Csodálatos árut egy szuper áron, mindössze 100 rubel. Felcsillan a magányos estéket, és túlfeszültség életerő!
Itt látható a szerkezete:
Elfogadom, úgy néz ki, szörnyű. Természetesen lehetőség van, hogy csökkentse a termék nevét. De mi van, ha több száz vagy több ezer? Az is lehetséges, segítségével php trim a név része, csak a karakterek számát. De mi van, ha akkor meg fogja változtatni az elrendezés és blokkok kisebb lesz, vagy fordítva 2-3-szor több? Mindez nem lehetőség, mindez nem illik hozzánk.
És itt van a támogató CSS és volshebloe ingatlan text-túlcsordulás. De ez megfelelően kell használni együtt számos más tulajdonságokkal. Az alábbiakban bemutatjuk, kulcsrakész megoldás, majd elmagyarázza, mi az, ami.
Tehát, félretolta manuális szerkesztése nevét áruk és lágy trim stílusok vesszük a CSS kezében, és mi megkapjuk:
Miracle Yudo silopridavatel este, titokzatos, art. 20255-59
Csodálatos árut egy szuper áron, mindössze 100 rubel. Felcsillan a magányos estéket, és túlfeszültség életerő!
Nos, jobb? Véleményem nagyon! És hozza az egérrel a címet. íme! Itt azt mutatja nekünk teljesen.
A szerkezet már nem változott semmit, csak hozzá egy díva egy osztály .header tag címet. De az új, kiegészített stílusok:
Nézd, mit tettünk:
- Már hozzá egy blokk tulajdonság white-space: nowrap. ami elveszi a képességét, hogy a szöveg áthelyezése egy új sort a szavak, így húzva összhangba;
- Aztán hozzáadjuk a túlfolyó tulajdonság: rejtettek. ami korlátozza a láthatóságát a blokk szélessége a vonalak, így elvágva minden felesleges és nem mutatja a látogató;
- Így a végén már beszállítási ellipszis vonalat a tulajdonság szöveg-overflow: ellipszis. lehetővé téve ezáltal a látogató, hogy megértsék, hogy ez nem az a sor végére, és meg kell hozni valószínűleg myschku és nézd meg teljesen.
Szerelem CSS, tanulni CSS és saitostroitel'stva nem tűnik olyan nehéz dolog =)