Bloķēt pārplūdi - CSS-triki

block-overflowĪpašums truncates tekstu un norāda, vairāk satura izriet, ievietojot daudzpunkti vai pielāgotu string pēc vairākiem līnijām, kas ir noteikts ar max-linesīpašumu.

Īpašums ir ieviests CSS pārpildes moduļa 3. līmeņa specifikācijas redaktora projektā. Tas nozīmē, ka tas pašlaik ir eksperimentāls un tiek uzskatīts par nepabeigtu darbu. Patiesībā jūs varat sekot sarunai, kurā ietilpst pļāpāšana par īpašuma vispār pārdēvēšanu.

Sintakse

.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )

block-overflow pieņem šādas vērtības:

• clip: Neievieto rakstzīmi, lai norādītu vairāk sekojamā teksta. Tā vietā saturs ir tikai saīsināts un nogriezts pēdējā rakstzīmē.
• ellipsis: Pēdējās rindas beigās parāda elipsi (…). Tam vajadzētu būt atveidotam kā Unicode rakstzīmei (U + 2026), taču to varētu aizstāt ar ekvivalentu, pamatojoties uz izmantotā User-Agent satura valodu un rakstīšanas režīmu.
• : Pēdējās rindas beigās parāda pielāgotu tekstu (piemēram, “Lasīt vairāk →”). Specifikācijā teikts, ka User-Agent var aizstāt virkni ar elipsi, ja virkne ir “absurdi” gara.

Arī tas viss ir eksperimentāls, nepabeigts darbs. Šīs vērtības varētu mainīties. Vai arī varētu pievienot vairāk. Piemēram, ir bijuši aicinājumi izveidot “gudrāku” elipsi, kas varētu paveikt vairāk, piemēram, teksta apgriešanu vidū:

One thing led to another and… yada yada yada, that was that.

Izmantojiet line-clampīsi

Mēs varam iegūt gandrīz to pašu, izmantojot to, line-clampkas ir īsums attiecībā uz block-overflowun max-linesīpašībām.

Kā tas pašlaik noteikts, lai gan, line-clamptikai pieņem vienu skaitlisko vērtību max-linesun netieši iestata block-overflowuz ellipsisvērtību. Tātad, ja jūs vēlaties izmantot pielāgotu virkni saīsināšanai, jums tā vietā ir jāiet ar garo formu.

Pārlūka atbalsts

Pašlaik nav neviena, bet jūs varat saņemt atbalstu, izmantojot WebKit patentēto ieviešanu line-clamp:

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
14 *	68 *	Nē	17	5 *

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88 *	85 *	2,3 *	5,0–5,1 *