-webkit-line-clamp
Quick Summary for -webkit-line-clamp
-webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
Code Usage for -webkit-line-clamp
/* Keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /* Global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; More Details for -webkit-line-clamp
-webkit-line-clamp
The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.
In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.
When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
Note: This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The CSS Overflow Module Level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.
Syntax
/* Keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /* Global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; none This value specifies that the content won't be clamped.
<integer> This value specifies the number of lines after which the content will be clamped. It must be greater than 0.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |
Formal syntax
none | <integer>
Examples
Truncating a paragraph
HTML<p> In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines. An ellipsis will be shown at the point where the text is clamped. </p> p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } Specifications
| Specification |
|---|
| CSS Overflow Module Level 3 # webkit-line-clamp |
See also
Line Clampin' (Truncating Multiple Line Text)line-clamp
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
