В block-overflowимота отрязъци текст и показва повече съдържание следва чрез вмъкване многоточие или обичай низ след определен брой линии, които се определят от max-linesимота.
Свойството е въведено в редакционния проект на спецификацията CSS Overflow Module Level 3. Това означава, че в момента е експериментално и се счита за незавършена работа. Всъщност можете да проследите разговора, който включва изцяло бърборене за преименуване на имота.
Синтаксис
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow приема следните стойности:
clip: Не вмъква знак, който да указва повече текст за следване. Вместо това, съдържанието е просто съкратено и отрязано при последния знак.ellipsis: Показва многоточие (...) в края на последния ред. Той трябва да се изобразява като Unicode знак (U + 2026), но може да бъде заменен с еквивалент въз основа на езика на съдържанието и режима на писане на използвания User-Agent.: Показва персонализиран текст (например „Прочетете повече →“) в края на последния ред. Спецификацията казва, че User-Agent може да замени низа с елипса, ако низът е „абсурдно“ дълъг.
Отново всичко това е експериментална, текуща работа. Тези стойности могат да се променят. Или може да се добавят още. Например, има призиви за „по-умна“ елипса, която може да е в състояние да направи повече неща, като изрязване на текст в средата:
One thing led to another and… yada yada yada, that was that.Използвайте line-clampза кратко
Ние може да получи само за едно и също нещо с помощта на line-clampкоето е съкращение за block-overflowи max-linesсвойства.
Както е определено понастоящем, обаче, line-clampприема само една единствена цифрова стойност за max-linesи имплицитно определя block-overflowна ellipsisстойност. Така че, ако искате да използвате персонализиран низ за отрязване, трябва вместо това да отидете с дългата форма.
Поддръжка на браузър
В момента няма, но можете да получите известна поддръжка, като използвате собствената реализация на WebKit на line-clamp:
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 14 * | 68 * | Не | 17 | 5 * |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5.0-5.1 * |