Prelijevanje teksta - CSS-trikovi

text-overflowNekretnina u CSS bavi situacijama u kojima se tekst ošišan kad nabuja okvir elementa. Može se izrezati (tj. Odsjeći, sakriti), prikazati elipsu ('...', vrijednost raspona Unicode U + 2026) ili prikazati autorski definirani niz (nema trenutne podrške preglednika za autorski definirane nizove).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Imajte na umu da se text-overflowto događa samo kada overflowsvojstvo spremnika ima vrijednost hidden, scrollili autoi white-space: nowrap;.

Prelijevanje teksta može se dogoditi samo na elementima na razini bloka ili na liniji, jer element mora imati širinu da bi mogao biti preliven. Preljev se događa u smjeru kako je određeno svojstvom smjera ili povezanim atributima.

Sljedeća demonstracija prikazuje ponašanje text-overflowsvojstva, uključujući sve moguće vrijednosti. Podrška za preglednik varira!

Pogledajte ovu olovku!

Ako postavite overflowna scrollili autoće se prikazati klizači za otkrivanje dodatnog teksta, dok hiddenneće. Skriveni tekst može se odabrati odabirom elipsa.

Stare stvari

Stara verzija specifikacije kaže da biste mogli koristiti URL slike za elipsu, ali izgleda kao da je ispuštena.

Postoji sintaksa s dvije vrijednosti, npr text-overflow: ellipsis ellipsis;. Koja bi kontrolirala preljev s lijeve i desne strane istog spremnika. Nisam siguran kako bi to bilo moguće postići. Možda usredotočeni tekst u premalom spremniku? Nova specifikacija kaže da je ovo, kao i definiranje niza, "u opasnosti".

Nisam siguran odakle ellipsis-worddolazi. To se ne nalazi u specifikaciji ili bilo kojoj drugoj dokumentaciji osim na WebPlatform.org.

text-overflowSvojstvo koristi se skraćenica za kombinaciju text-overflow-modei text-overflow-ellipsis, ali ne više i oni zasebna svojstva ne postoje.