Limit text length to n lines using CSS

Question

Is it possible to limit a text length to  n  lines using CSS  or cut it when overflows vertically    text-overflow  ellipsis  only works for 1 line text     original text      Ultrices natoque mus mattis  aliquam  cras in pellentesque   tincidunt elit purus lectus  vel ut aliquet  elementum nunc   nunc rhoncus placerat urna  Sit est sed  Ut penatibus turpis   mus tincidunt  Dapibus sed aenean  magna sagittis  lorem velit   wanted output  2 lines       Ultrices natoque mus mattis  aliquam  cras in pellentesque   tincidunt elit purus lectus  vel ut aliquet  elementum

User · Answer

following CSS class helped me in getting two line ellipsis      two-line-ellipsis           padding-left 2vw          text-overflow  ellipsis          overflow  hidden          width  325px          line-height  25px          display  -webkit-box          -webkit-line-clamp  2          -webkit-box-orient  vertical          padding-top  15px

User · Answer

Currently you can t  but in future you will be able to use text-overflow ellipis-lastline  Currently it s available with vendor prefix in  Opera 10 60   example

User · Answer

I really like line-clamp  but no support for firefox yet   so i go with a math calc and just hide the overflow   body-content body-overflow-hidden h5       max-height  62px    font-size   line-height   lines-to-show 4 in this case  63px if you go with jquery        overflow  hidden     body-content h5       font-size  14px     need to know this       line-height 1 1    and this       now lets say you want to remove and add this class via jQuery with a link  you will need to have an extra pixel so the max-height it will be 63 px  this is because you need to check every time if the height greather than 62px  but in the case of 4 lines you will get a false true  so an extra pixel will fix this and it will no create any extra problems  i will paste a coffeescript for this just to be an example  uses a couple of links that are hidden by default  with classes read-more and read-less  it will remove the ones that the overflow is not need it and remove the body-overflow classes  jQuery - gt           read-more   each - gt          if   this  parent   find  h5   height    lt  63                this  parent   removeClass  body-overflow-hidden   find   read-less   remove                  this  remove           else               this  show            read-more   click  event  - gt          event preventDefault             this  parent   removeClass  body-overflow-hidden             this  hide             this  parent   find   read-less   show            read-less   click  event  - gt          event preventDefault             this  parent   addClass  body-overflow-hidden             this  hide             this  parent   find   read-more   show

User · Answer

Basic Example Code  learning to code is easy  Check Style CSS comments    x000D   x000D  table tr   x000D    display  flex  x000D    x000D  table tr td   x000D       start    x000D    display  inline-block      lt - Prevent  lt tr gt  in a display css    x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D       end    x000D    padding  10px  x000D    width  150px     Space size limit    x000D    border  1px solid black  x000D    overflow  hidden  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  x000D          Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nulla egestas erat ut luctus posuere  Praesent et commodo eros  Vestibulum eu nisl vel dui ultrices ultricies vel in tellus  x000D         lt  td gt  x000D         lt td gt  x000D          Praesent vitae tempus nulla  Donec vel porta velit  Fusce mattis enim ex  Mauris eu malesuada ante  Aenean id aliquet leo  nec ultricies tortor  Curabitur non mollis elit  Morbi euismod ante sit amet iaculis pharetra  Mauris id ultricies urna  Cras ut x000D          nisi dolor  Curabitur tellus erat  condimentum ac enim non  varius tempor nisi  Donec dapibus justo odio  sed consequat eros feugiat feugiat  x000D         lt  td gt  x000D         lt td gt  x000D          Pellentesque mattis consequat ipsum sed sagittis  Pellentesque consectetur vestibulum odio  aliquet auctor ex elementum sed  Suspendisse porta massa nisl  quis molestie libero auctor varius  Ut erat nibh  fringilla sed ligula ut  iaculis interdum sapien  x000D          Ut dictum massa mi  sit amet interdum mi bibendum nec  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  x000D          Sed viverra massa laoreet urna dictum  et fringilla dui molestie  Duis porta  ligula ut venenatis pretium  sapien tellus blandit felis  non lobortis orci erat sed justo  Vivamus hendrerit  quam at iaculis vehicula  nibh nisi fermentum augue  at sagittis x000D          nibh dui et erat  x000D         lt  td gt  x000D         lt td gt  x000D          Nullam mollis nulla justo  nec tincidunt urna suscipit non  Donec malesuada dolor non dolor interdum  id ultrices neque egestas  Integer ac ante sed magna gravida dapibus sit amet eu diam  Etiam dignissim est sit amet libero dapibus  in consequat est x000D          aliquet  x000D         lt  td gt  x000D         lt td gt  x000D          Vestibulum mollis  dui eu eleifend tincidunt  erat eros tempor nibh  non finibus quam ante nec felis  Fusce egestas  orci in volutpat imperdiet  risus velit convallis sapien  sodales lobortis risus lectus id leo  Nunc vel diam vel nunc congue finibus  x000D          Vestibulum turpis tortor  pharetra sed ipsum eu  tincidunt imperdiet lorem  Donec rutrum purus at tincidunt sagittis  Quisque nec hendrerit justo  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

What you can do is the following    x000D   x000D   max-lines   x000D    display  block    or inline-block    x000D    text-overflow  ellipsis  x000D    word-wrap  break-word  x000D    overflow  hidden  x000D    max-height  3 6em  x000D    line-height  1 8em  x000D    x000D   lt p class  max-lines  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nunc vitae leo dapibus  accumsan lorem eleifend  pharetra quam  Quisque vestibulum commodo justo  eleifend mollis enim blandit eu  Aenean hendrerit nisl et elit maximus finibus  Suspendisse scelerisque consectetur nisl mollis scelerisque  lt  p gt  x000D   x000D   x000D    where max-height    line-height   times   lt number-of-lines gt  in em

User · Answer

I have a solution which works well but instead an ellipsis it uses a gradient  It works when you have dynamic text so you don t know if it will be long enough to need an ellipse   The advantages are that you don t have to do any JavaScript calculations and it works for variable width containers including table cells and is cross-browser  It uses a couple of extra divs  but it s very easy to implement   Markup    lt td gt       lt div class  fade-container  title  content goes here  gt           content goes here           lt div class  fade  gt       lt  div gt   lt  td gt    CSS    fade-container     two lines       overflow  hidden      position  relative      line-height  18px          height must be a multiple of line-height for how many rows you want to show  height   line-height x rows         height  36px      -ms-hyphens  auto      -webkit-hyphens  auto      hyphens  auto      word-wrap  break-word      fade           position  absolute          top  50     only cover the last line  If this wrapped to 3 lines it would be 33  or the height of one line            right  0          bottom  0          width  26px          background  linear-gradient to right   rgba 255 255 255 0  0  rgba 255 255 255 1  100        blog post  http   salzerdesign com blog  p 453  example page  http   salzerdesign com test fade html

User · Answer

class     word-break  break-word     overflow  hidden     text-overflow  ellipsis     display  -webkit-box     line-height  16px     fallback       max-height  32px     fallback       -webkit-line-clamp  2     number of lines to show       -webkit-box-orient  vertical

User · Answer

There s a way to do it using unofficial line-clamp syntax  and starting with Firefox 68 it works in all major browsers    x000D   x000D  body   x000D     margin  20px  x000D    x000D   x000D   text   x000D     overflow  hidden  x000D     text-overflow  ellipsis  x000D     display  -webkit-box  x000D     -webkit-line-clamp  2     number of lines to show    x000D     -webkit-box-orient  vertical  x000D    x000D   lt div class  text  gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Aliquam consectetur venenatis blandit  Praesent vehicula  libero non pretium vulputate  lacus arcu facilisis lectus  sed feugiat tellus nulla eu dolor  Nulla porta bibendum lectus quis euismod  Aliquam volutpat ultricies porttitor  Cras risus nisi  accumsan vel cursus ut  sollicitudin vitae dolor  Fusce scelerisque eleifend lectus in bibendum  Suspendisse lacinia egestas felis a volutpat  x000D   lt  div gt  x000D   x000D   x000D    Unless you care about IE users  there is no need to do line-height and max-height fallbacks

User · Answer

Working Cross-browser Solution  This problem has been plaguing us all for years    To help in all cases  I have laid out the CSS only approach  and a jQuery approach in case the css caveats are a problem   Here s a CSS only solution I came up with that works in all circumstances  with a few minor caveats    The basics are simple  it hides the overflow of the span  and sets the max height based on the line height as suggested by Eugene Xa   Then there is a pseudo class after the containing div that places the ellipsis nicely    Caveats  This solution will always place the ellipsis  regardless if there is need for it   If the last line ends with an ending sentence  you will end up with four dots       You will need to be happy with justified text alignment   The ellipsis will be to the right of the text  which can look sloppy   Code   Snippet  jsfiddle   x000D   x000D   text   x000D    position  relative  x000D    font-size  14px  x000D    color  black  x000D    width  250px     Could be anything you like     x000D    x000D   x000D   text-concat   x000D    position  relative  x000D    display  inline-block  x000D    word-wrap  break-word  x000D    overflow  hidden  x000D    max-height  3 6em      Number of lines you want visible     line-height     x000D    line-height  1 2em  x000D    text-align justify  x000D    x000D   x000D   text ellipsis  after   x000D    content         x000D    position  absolute  x000D    right  -12px   x000D    bottom  4px  x000D    x000D   x000D     Right and bottom for the psudo class are px based on various factors  font-size etc    Tweak for your own needs     x000D   lt div class  text ellipsis  gt  x000D     lt span class  text-concat  gt  x000D  Lorem ipsum dolor sit amet  nibh eleifend cu his  porro fugit mandamus no mea  Sit tale facete voluptatum ea  ad sumo altera scripta per  eius ullum feugait id duo  At nominavi pericula persecuti ius  sea at sonet tincidunt  cu posse facilisis eos  Aliquid philosophia contentiones id eos  per cu atqui option disputationi  no vis nobis vidisse  Eu has mentitum conclusionemque  primis deterruisset est in  x000D   x000D  Virtute feugait ei vim  Commune honestatis accommodare pri ex  Ut est civibus accusam  pro principes conceptam ei  et duo case veniam  Partiendo concludaturque at duo  Ei eirmod verear consequuntur pri  Esse malis facilisis ex vix  cu hinc suavitate scriptorem pri  x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    jQuery Approach  In my opinion this is the best solution  but not everyone can use JS  Basically  the jQuery will check any  text element  and if there are more chars than the preset max var  it will cut the rest off and add an ellipsis    There are no caveats to this approach  however this code example is meant only to demonstrate the basic idea - I wouldn t use this in production without improving on it for a two reasons   1  It will rewrite the inner html of  text elems  whether needed or not   2  It does no test to check that the inner html has no nested elems - so you are relying a lot on the author to use the  text correctly    Edited  Thanks for the catch  markzzz  Code  amp  Snippet  jsfiddle   x000D   x000D  setTimeout function   x000D    x000D   var max   200  x000D    var tot  str  x000D        text   each function     x000D     str   String   this  html     x000D     tot   str length  x000D      str    tot  lt   max  x000D         str x000D          str substring 0  max   1          x000D        this  html str   x000D        x000D    500      Delayed for example only  x000D   text   x000D    position  relative  x000D    font-size  14px  x000D    color  black  x000D    font-family  sans-serif  x000D    width  250px     Could be anything you like     x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p class  text  gt  x000D  Old men tend to forget what thought was like in their youth  they forget the quickness of the mental jump  the daring of the youthful intuition  the agility of the fresh insight  They become accustomed to the more plodding varieties of reason  and because this is more than made up by the accumulation of experience  old men think themselves wiser than the young  x000D   lt  p gt  x000D   x000D   lt p class  text  gt  x000D  Old men tend to forget what thought was like in their youth  x000D   lt  p gt  x000D    lt  -- Working Cross-browser Solution x000D   x000D  This is a jQuery approach to limiting a body of text to n words  and end with an ellipsis -- gt  x000D   x000D   x000D

User · Answer

I ve been looking around for this  but then I realize  damn my website uses php     Why not use the trim function on the text input and play with the max length       Here is a possible solution too for those using php  http   ideone com PsTaI   lt  php  s    In the beginning there was a tree     max length   10   if  strlen  s   gt   max length        offset     max length - 3  - strlen  s       s   substr  s  0  strrpos  s        offset               echo  s    gt

User · Answer

If you want to focus on each letter you can do like that  I refer to this question   x000D   x000D  function truncate source  size    x000D    return source length  gt  size   source slice 0  size - 1            source  x000D    x000D   x000D  var text   truncate  Truncate text to fit in 3 lines   14   x000D  console log text   x000D   x000D   x000D    If you want to focus on each word you can do like that   space   x000D   x000D  const truncate    title  limit   14    gt        14 IS DEFAULT ARGUMENT  x000D      const newTitle       x000D      if  title length  gt  limit    x000D          title split      reduce  acc  cur    gt    x000D              if  acc   cur length  lt   limit    x000D                  newTitle push cur   x000D                x000D              return acc   cur length  x000D             0   x000D   x000D          return newTitle join              x000D        x000D      return title  x000D    x000D   x000D  var text   truncate  Truncate text to fit in 3 lines   14   x000D  console log text   x000D   x000D   x000D    If you want to focus on each word you can do like that   without space   x000D   x000D  const truncate    title  limit   14    gt        14 IS DEFAULT ARGUMENT  x000D      const newTitle       x000D      if  title length  gt  limit    x000D          Array prototype slice call title  reduce  acc  cur    gt    x000D              if  acc   cur length  lt   limit    x000D                  newTitle push cur   x000D                x000D              return acc   cur length  x000D             0   x000D   x000D          return newTitle join             x000D        x000D      return title  x000D    x000D   x000D  var text   truncate  Truncate text to fit in 3 lines   14   x000D  console log text   x000D   x000D   x000D

User · Answer

As far as I can see  this would be possible only using height   some em value   overflow  hidden and even then it wouldn t have the fancy     at the end   If that is not an option  I think it s impossible without some server side pre-processing  difficult because text flow is impossible to predict reliably  or jQuery  possible but probably complicated

User · Answer

The solution from this thread is to use the jquery plugin dotdotdot  Not a CSS solution  but it gives you a lot of options for  read more  links  dynamic resizing etc

[css] Limit text length to n lines using CSS

Examples related to css

Examples related to text

Examples related to overflow

Examples related to ellipsis