Deprecate the JS truncation in favour of CSS line-clamp

Created on 30 October 2024, 3 months ago

Problem/Motivation

The current JS solution doesn't work well when there's HTML code in the text.
Meanwhile, CSS line-clamp is coming to the rescue. Browser support is pretty good, so the only thing left for JS is a toggle link.

See:
- https://css-tricks.com/almanac/properties/l/line-clamp/
- https://caniuse.com/?search=line-clamp

Steps to reproduce

Proposed resolution

1. Replace the 'length' field of the field formatter with a 'lines' field.
2. Remove/Replace the old truncation JS code
3. Add class to the field wrapper and corresponding stylesheets in a CSS file, using a CSS variable / custom property to configure the amount of lines to control
4. Add inline css to the wrapper with JS or php (field attributes) => style="--line-clamp-amount: x"

Remaining tasks

User interface changes

API changes

Data model changes

🌱 Plan
Status

Active

Version

2.0

Component

Miscellaneous

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024