{"id":559,"date":"2022-04-15T05:16:44","date_gmt":"2022-04-15T05:16:44","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=559"},"modified":"2024-02-28T23:25:41","modified_gmt":"2024-02-28T23:25:41","slug":"using-text-overflow-and-line-clamp-properties","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/using-text-overflow-and-line-clamp-properties\/","title":{"rendered":"Using text-overflow and line-clamp Properties"},"content":{"rendered":"

The CSS properties text-overflow<\/a> and line-clamp allow you to shorten text whenever a container width or height is reached, regardless of the number of characters.
\n<\/p>\n

To create well-formed layouts, it may be necessary to truncate text to a certain maximum length, regardless of their character count. Especially when we develop layouts for websites that are maintained via CMS by an editorial team, we need to be confident that the layouts maintain their symmetry and aesthetics as much as possible, regardless of their content. There are a variety of approaches to this, but probably the simplest is with CSS text-overflow<\/code> and line-clamp<\/code> properties.<\/p>\n

Shorten single-line text with CSS text-overflow<\/h4>\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n

Initial situation: Width limited container with long text. The text breaks into a new line.<\/p>\n

First, we need to prevent the text from wrapping to a second line. We achieve this with white-space: nowrap<\/code>.<\/p>\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n

The CSS property white-space<\/a>: nowrap; prevents the text from wrapping.<\/p>\n

Second requirement is the statement overflow: hidden<\/code>, so that the text does not overflow its container.<\/p>\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n

The overflow<\/a>: hidden; statement truncates overflowing text.<\/p>\n

Now we can use text-overflow: ellipsis<\/code> to not just truncate the text at the right container edge, but to create an ellipsis.<\/p>\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n

CSS property text-overflow: ellispis;<\/p>\n

The full CSS code looks like this:<\/p>\n

p {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}<\/code><\/pre>\n
Shorten multiline text with CSS line-clamp<\/h4>\n
Currently the line-clamp property is in Editor’s Draft, to use this property, you will need to add a vendor prefix of -webkit-.<\/p>\n
With CSS line-clamp we can set the maximum number of lines a text may wrap to. Here again the initial situation:<\/p>\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n
Initial situation: Container limited in width with multiple lines of text.<\/p>\n
The prerequisite is the combination with CSS display: -webkit-inline-box<\/code> or display: -webkit-box<\/code>, as well as -webkit-box-orient: vertical<\/code> and overflow: hidden<\/code>.<\/p>\n
With the following CSS code we can now easily limit the maximum number of lines to three. An ellipsis will also be added automatically at the end of the third line. The browser prefix -webkit- is currently necessary in all browsers.<\/p>\n
p {\r\n  overflow: hidden;\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: 3;\r\n}<\/code><\/pre>\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n<\/div>\n
Results in the text limited to three lines.<\/p>\n","protected":false},"excerpt":{"rendered":"
The CSS properties text-overflow and line-clamp allow you to shorten text whenever a container width or height is reached, regardless of the number of characters.<\/p>\n","protected":false},"author":1,"featured_media":670,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":3,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/559\/revisions\/583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/670"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}