Applying an ellipsis to multiline text [duplicate]

Just increase the -webkit-line-clamp: 4; to increase the number of lines

p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
<p>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</p>

Line clamp is a proprietary and undocumented CSS (webkit) : https://caniuse.com/#feat=css-line-clamp, so it currently work on only few browsers.

Removed duplicated ‘display’ property + removed unnecessary ‘text-overflow: ellipsis’.

Related Contents:

  1. With CSS, use “…” for overflowed block of multi-lines
  2. Place text after dots inline with the second line of text overflow ellipsis
  3. text-overflow is not working when using display:flex
  4. Why doesn’t CSS ellipsis work in table cell?
  5. How to remove the space between inline/inline-block elements?
  6. How to horizontally center an element
  7. Why don’t flex items shrink past content size?
  8. How can I center text (horizontally and vertically) inside a div block?
  9. Percentage Height HTML 5/CSS
  10. CSS: Width in percentage and Borders
  11. Why doesn’t nth-of-type/nth-child work on nested elements?
  12. Vertically centering a div inside another div [duplicate]
  13. How to modify the fill color of an SVG image when being served as background image?
  14. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  15. What to use in place of ::ng-deep
  16. Does opacity:0 have exactly the same effect as visibility:hidden
  17. Left column and stacked right column using flexbox CSS [duplicate]
  18. Li item on two lines. Second line has no margin
  19. How can I draw vertical text with CSS cross-browser?
  20. How to fallback to local stylesheet (not script) if CDN fails
  21. Colspan/Rowspan for elements whose display is set to table-cell
  22. Word wrap options in a select list
  23. Change cursor type on input type=”file” [duplicate]
  24. What is syntax for selector in CSS for next element?
  25. How to change the length/position of text-decoration:underline?
  26. Use CSS to remove the space between images [duplicate]
  27. How to make div occupy remaining height?
  28. How to apply CSS page-break to print a table with lots of rows?
  29. Hexagon shape with a border/outline
  30. Text not centered with justify-content: center
  31. Flex items not respecting margins and box-sizing: border-box
  32. Unskewing the ends of an assortment multiple skewed images
  33. Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
  34. grid-auto-flow in snake lines?
  35. I can’t get my font-awesome icons to show up. Tried importing css with multiple methods
  36. Can I nest button inside another button?
  37. Display text, a dotted line then more text spanning the width of the page [duplicate]
  38. Vertical (rotated) text in HTML table
  39. How can I make a 45 degree responsive ribbon with folded corner?
  40. Blank iFrame in IE
  41. How do I vertically align something inside a span tag?
  42. Changing the highlight color when selecting text in an HTML text input
  43. CSS: image link, change on hover
  44. Can a ::before selector be used with a ?
  45. How to have two items on opposite sides on the same line
  46. Change color of one character in a text box HTML/CSS [duplicate]
  47. HTML5 Required input styling
  48. Can you have a within a ?
  49. How do I remove background-image in css?
  50. how to use z-index with relative positioning?

Leave a Comment