Setting a max character length in CSS

by

You could always use a truncate method by setting a max-width and overflow ellipsis like this

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

An example:

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}
<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

For a multi-line truncation have a look at a flex solution.
An example with truncation on 3 rows.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

An example:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

More Related Contents:

  1. Vertical Text Direction
  2. How to stop text from taking up more than 1 line?
  3. HTML: Changing colors of specific words in a string of text
  4. Dual-Color Text
  5. Changing the highlight color when selecting text in an HTML text input
  6. Paragraph of text in circle using CSS [duplicate]
  7. How to use an tag inside a in the middle of a text? [duplicate]
  8. Making text background transparent but not text itself
  9. How can I align text directly beneath an image?
  10. How to place Text and an Image next to each other in HTML?
  11. CSS triangle containing text
  12. How to change the style of the title attribute inside an anchor tag?
  13. Word-wrap in an HTML table
  14. Last margin / padding collapsing in flexbox / grid layout
  15. set content height 100% jquery mobile
  16. How to center text vertically with a large font-awesome icon?
  17. Why is a div with “display: table-cell;” not affected by margin?
  18. HTML iframe – disable scroll
  19. Why isn’t object-fit working in flexbox?
  20. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  21. Best way to include CSS? Why use @import?
  22. Overflow:hidden dots at the end
  23. Add a horizontal scrollbar to an HTML table
  24. Should global css styles be set on the html element or the body element?
  25. How do I add a tool tip to a span element?
  26. Is there a way to use use text as the background with CSS?
  27. CSS Select box arrow style
  28. z-index not working with position absolute
  29. Img’s max-height not respecting parent’s dimensions
  30. backdrop-filter not working for nested elements in Chrome

Leave a Comment