Teksta pārpilde - CSS-triki

Anonim

text-overflowĪpašums CSS nodarbojas ar situācijām, kad teksts tiek apgriezts, ja tas pārplūst uz elementa lodziņu. To var sagriezt (ti, nogriezt, paslēpt), parādīt elipsi ('…', unikoda diapazona vērtība U + 2026) vai parādīt autora definētu virkni (pašlaik nav autora definētu virkņu pārlūkprogrammas atbalsta).

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

Ņemiet vērā, ka text-overflownotiek tikai tad, kad konteinera overflowīpašums ir vērtība hidden, scrollvai autoun white-space: nowrap;.

Teksta pārpilde var notikt tikai bloku vai iekļauto bloku līmeņa elementos, jo elementa platumam jābūt pārslogotam. Pārplūde notiek virzienā, ko nosaka virziena īpašība vai saistītie atribūti.

Šajā demonstrācijā tiek parādīta text-overflowīpašuma darbība, ieskaitot visas iespējamās vērtības. Pārlūkprogrammas atbalsts ir atšķirīgs!

Pārbaudiet šo pildspalvu!

Iestatīšana overflow, lai scrollvai autorādīs ritjoslas, lai atklātu papildu tekstu, bet hiddennebūs. Slēpto tekstu var izvēlēties, atlasot elipses.

Vecā manta

Vecajā specifikācijas versijā teikts, ka elipsē var izmantot attēla URL, taču izskatās, ka tas ir nomests.

Pastāv divu vērtību sintakse, piemēram text-overflow: ellipsis ellipsis;, kas kontrolētu pārpildi tā paša konteinera kreisajā un labajā pusē. Es neesmu pārliecināts, kā to būtu iespējams sasniegt. Varbūt centrēts teksts pārāk mazā traukā? Jaunajā specifikācijā teikts, ka tas, kā arī virknes noteikšana, ir "apdraudēts".

Es neesmu pārliecināts, no kurienes ellipsis-word. Tas nav specifikācijā vai kādā citā dokumentācijā, izņemot WebPlatform.org.

text-overflowĪpašums, kas izmantots, lai būtu saīsinājums attiecībā uz kombināciju text-overflow-modeun text-overflow-ellipsis, bet ne vairs, un tie atsevišķas īpašības neeksistē.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
25+ 5.1+ 19+ 12.1+ IE8 + 2.1+ 3.2+