From 4e592992f2cacd9e9058a6674bc4a4f98cba5b38 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 16 May 2021 20:19:13 +0300 Subject: [PATCH] Add line clamp snippet --- snippets/line-clamp.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 snippets/line-clamp.md diff --git a/snippets/line-clamp.md b/snippets/line-clamp.md new file mode 100644 index 000000000..7c8723bf0 --- /dev/null +++ b/snippets/line-clamp.md @@ -0,0 +1,25 @@ +--- +title: Trim multiline text +tags: layout,visual,intermediate +--- + +Limit multiline text to a given number of lines. + +- Use `-webkit-line-clamp` to set the maximum number of lines to be displayed. +- Set `display` to `-webkit-box` and `-webkit-box-orient` to `vertical`, as they are required for `-webkit-line-clamp` to be applied. +- Apply `overflow: hidden` to hide any overflow after the text is trimmed. + +```html +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at, feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat, lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla ultrices dui turpis, interdum consectetur urna tempus at. +

+``` + +```css +.excerpt { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +```