block-overflowNieruchomość obcina tekst i wskazuje więcej treści następuje poprzez włożenie wielokropek lub niestandardowy ciąg po kilku liniach, które są ustalone przez max-linesnieruchomości.
Właściwość została wprowadzona w specyfikacji edytora Draft of CSS Overflow Module Level 3. Oznacza to, że jest w tej chwili eksperymentalna i uważana za prace w toku. W rzeczywistości możesz śledzić rozmowę, która obejmuje rozmowę na temat całkowitej zmiany nazwy właściwości.
Składnia
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow akceptuje następujące wartości:
clip: Nie wstawia znaku wskazującego więcej tekstu do naśladowania. Zamiast tego treść jest po prostu obcinana i odcinana na ostatnim znaku.ellipsis: Wyświetla wielokropek (…) na końcu ostatniej linii. Powinien renderować się jako znak Unicode (U + 2026), ale można go zastąpić jego odpowiednikiem w oparciu o język treści i tryb pisania używanego agenta użytkownika.: Wyświetla własny tekst (np. „Czytaj więcej →”) na końcu ostatniej linii. Specyfikacja mówi, że User-Agent może zamienić ciąg na wielokropek, jeśli ciąg jest „absurdalnie” długi.
Ponownie, wszystko to jest eksperymentalną pracą w toku. Te wartości mogą się zmienić. Albo można dodać więcej. Na przykład pojawiły się apele o „inteligentniejszą” wielokropek, która mogłaby robić więcej rzeczy, na przykład przycinać tekst w środku:
One thing led to another and… yada yada yada, that was that.Użyj line-clampw skrócie
Możemy uzyskać prawie to samo, używając line-clampskrótu właściwości block-overflowi max-lines.
Jednak zgodnie z obecną definicją line-clampakceptuje tylko jedną wartość liczbową dla max-linesi domyślnie ustawia block-overflowtę ellipsiswartość. Tak więc, jeśli chcesz użyć niestandardowego ciągu do obcinania, musisz zamiast tego użyć długiej formy.
Wsparcie przeglądarki
W tej chwili brak, ale możesz uzyskać pomoc, korzystając z zastrzeżonej implementacji WebKit line-clamp:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nie | 17 | 5 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |