block-overflowNekretnine skraćeni tekst i pokazuje više sadržaja slijedi umetanjem elipse ili prilagođeni niz nakon niza linija koje je postavilo max-linesimovine.
Svojstvo je uvedeno u urednikov nacrt specifikacije CSS modula preljeva 3. To znači da je trenutno eksperimentalno i da se smatra radom koji je u tijeku. Zapravo možete pratiti razgovor koji uključuje brbljanje o preimenovanju dobra.
Sintaksa
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow prihvaća sljedeće vrijednosti:
clip: Ne ubacuje znak koji označava više teksta koji treba slijediti. Umjesto toga, sadržaj je samo skraćen i odsječen kod zadnjeg znaka.ellipsis: Prikazuje elipsu (...) na kraju zadnjeg retka. Trebao bi se prikazivati kao Unicode znak (U + 2026), ali mogao bi biti zamijenjen ekvivalentom na temelju jezika sadržaja i načina pisanja User-Agenta koji se koristi.: Prikazuje prilagođeni tekst (npr. "Pročitaj više →") na kraju zadnjeg retka. Specifikacija kaže da User-Agent može zamijeniti niz s elipsom ako je niz "apsurdno" dugačak.
Opet, sve je to eksperimentalni rad u tijeku. Te bi se vrijednosti mogle promijeniti. Ili, moglo bi se dodati još. Na primjer, bilo je poziva na „pametniju“ elipsu koja bi mogla učiniti više stvari, poput obrezivanja teksta u sredini:
One thing led to another and… yada yada yada, that was that.Koristite line-clampkratko
Otprilike istu stvar možemo dobiti koristeći line-clampskraćenicu za block-overflowi max-linessvojstva.
Kao što je trenutno definirano, međutim, line-clampprihvaća samo jednu numeričku vrijednost max-linesi implicitno postavlja block-overflowna ellipsisvrijednost. Dakle, ako želite koristiti prilagođeni niz za skraćivanje, tada umjesto toga morate ići s dugim obrascem.
Podrška preglednika
Trenutno nijedan, ali možete dobiti određenu podršku koristeći vlasničku implementaciju WebKita line-clamp:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Ne | 17 | 5 * |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |