css ellipsis on second line

Question

CSS text-overflow  ellipsis on second line  is this possible  I can t find it on the net   example   what I want is like this   I hope someone could help me  I need  an ellipsis on the second line of      but what s happening is this   I hope someone could help me  I

User · Answer

What a shame that you can t get it to work over two lines  Would be awesome if the element was display block and had a height set to 2em or something  and when the text overflowed it would show an ellipsis    For a single liner you can use    show-ellipsis       overflow  hidden      text-overflow  ellipsis      white-space  nowrap      For multiple lines maybe you could use a Polyfill such as jQuery autoellipsis which is on github http   pvdspek github com jquery autoellipsis

User · Answer

No real easy way to do this  Use the Clamp js library    clamp myHeader   clamp  3

User · Answer

I ve met this issue before  and there is no pure css solution  That s why i have developped a small library to deal with this issue  among others   The library provides objects to modelize and perform letter-level text rendering  You can for example emulate a text-overflow  ellipsis with an arbitrary limit  not necessary one line   Read more at http   www samuelrossille com home jstext html for screenshot  tutorial  and dowload link

User · Answer

Pure css way of trim multiline text with ellipsis  Adjust text container s hight  control line to break by   -webkit-line-clamp  2    block-ellipsis     display  block    display  -webkit-box    max-width  100     height  30px    margin  0 auto    font-size  14px    line-height  1    -webkit-line-clamp  2    -webkit-box-orient  vertical    overflow  hidden    text-overflow  ellipsis

User · Answer

I m not a JS pro  but I figured out a couple ways you could do this   The HTML    lt p id  truncate  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi elementum consequat tortor et euismod  Nam commodo consequat libero vel lobortis  Morbi ac nisi at leo vehicula consectetur  lt  p gt    Then with jQuery you truncate it down to a specific character count but leave the last word like this      Truncate but leave last word var myTag       truncate   text    if  myTag length  gt  100      var truncated   myTag trim   substring 0  100  split      slice 0  -1  join                     truncate   text truncated       The result looks like this      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi   elementum consequat tortor et      Or  you can simply truncate it down to a specific character count like this      Truncate to specific character var myTag       truncate   text    if  myTag length  gt  15      var truncated   myTag trim   substring 0  100                 truncate   text truncated       The result looks like this      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi   elementum consequat tortor et euismod      Hope that helps a bit   Here is the jsFiddle

User · Answer

a pure css method base on -webkit-line-clamp  which works on webkit    x000D   x000D   -webkit-keyframes ellipsis    for test   x000D      0    width  622px   x000D      50    width  311px   x000D      100    width  622px   x000D    x000D   ellipsis   x000D      max-height  40px    h n    x000D      overflow  hidden  x000D      background   eee  x000D   x000D      -webkit-animation  ellipsis ease 5s infinite   for test   x000D          x000D      overflow  visible  x000D           x000D    x000D   ellipsis  content   x000D      position  relative  x000D      display  -webkit-box  x000D      -webkit-box-orient  vertical  x000D      -webkit-box-pack  center  x000D      font-size  50px    w    x000D      line-height  20px    line-height h    x000D      color  transparent  x000D      -webkit-line-clamp  2    max row number n    x000D      vertical-align  top  x000D    x000D   ellipsis  text   x000D      display  inline  x000D      vertical-align  top  x000D      font-size  14px  x000D      color   000  x000D    x000D   ellipsis  overlay   x000D      position  absolute  x000D      top  0  x000D      left  50   x000D      width  100   x000D      height  100   x000D      overflow  hidden  x000D   x000D          x000D      overflow  visible  x000D      left  0  x000D      background  rgba 0 0 0  5   x000D           x000D    x000D   ellipsis  overlay before   x000D      content      x000D      display  block  x000D      float  left  x000D      width  50   x000D      height  100   x000D   x000D          x000D      background  lightgreen  x000D           x000D    x000D   ellipsis  placeholder   x000D      float  left  x000D      width  50   x000D      height  40px    h n    x000D   x000D          x000D      background  lightblue  x000D           x000D    x000D   ellipsis  more   x000D      position  relative  x000D      top  -20px    -h    x000D      left  -50px    -w    x000D      float  left  x000D      color   000  x000D      width  50px    width of the  more w    x000D      height  20px    h    x000D      font-size  14px  x000D   x000D          x000D      top  0  x000D      left  0  x000D      background  orange  x000D           x000D    x000D   lt div class  ellipsis  gt  x000D       lt div class  content  gt  x000D           lt div class  text  gt text text text text text text text text text text text text text text text text text text text text text  lt  div gt  x000D           lt div class  overlay  gt  x000D               lt div class  placeholder  gt  lt  div gt  x000D               lt div class  more  gt    more lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I used these css properties for line ellipsis- overflow  hidden  text-overflow  ellipsis  display  -webkit-box  -webkit-line-clamp  3   -webkit-box-orient  vertical   here  -webkit-line-clamp  3   is the number of line 3 lines  after which     shows

User · Answer

It is a non-standard CSS  which is not covered in current version of CSS  Firefox does not support it   Try to use JavaScript instead

User · Answer

here is good example in pure css    x000D   x000D   container  x000D    width  200px  x000D    x000D   block-with-text   x000D    overflow  hidden  x000D    position  relative   x000D    line-height  1 2em  x000D    max-height  3 6em  x000D    text-align  justify    x000D    margin-right  -1em  x000D    padding-right  1em  x000D    x000D   block-with-text  block-with-text  x000D    margin-top 10px  x000D    x000D   block-with-text before   x000D    content         x000D    position  absolute  x000D    right  0  x000D    bottom  0  x000D    x000D   block-with-text after   x000D    content      x000D    position  absolute  x000D    right  0  x000D    width  1em  x000D    height  1em  x000D    margin-top  0 2em  x000D    background  white  x000D    x000D   lt div class  container  gt  x000D   x000D   x000D   lt div class  block-with-text  gt  x000D  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a x000D   lt  div gt  x000D   x000D   lt div class  block-with-text  gt  x000D  Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D   lt  div gt  x000D   x000D   x000D   lt div class  block-with-text  gt  x000D  Lorem Ipsum is simply x000D   lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I found that Skeep s answer was not enough and needed an overflow style too   overflow  hidden  text-overflow  ellipsis  -webkit-line-clamp  2  display  -webkit-box  -webkit-box-orient  vertical

User · Answer

if someone is using SASS SCSS and stumbles upon this question - maybe this mixin could be of help    mixin line-clamp  numLines   1   lineHeight  1 412      overflow  hidden    text-overflow  -o-ellipsis-lastline    text-overflow  ellipsis    display  block       autoprefixer  off      display  -webkit-box    -webkit-line-clamp   numLines    -webkit-box-orient  vertical    max-height   numLines    lineHeight   unquote  em        this only adds the ellipsis in webkit browsers  rest just cuts it off

User · Answer

Just use line-clamp for the browsers that support it most modern browsers  and fall back to 1 line for older     text       white-space  nowrap      text-overflow  ellipsis      overflow  hidden         supports  -webkit-line-clamp  2          overflow  hidden        text-overflow  ellipsis        white-space  initial        display  -webkit-box        -webkit-line-clamp  2        -webkit-box-orient  vertical             browser support

User · Answer

Late Reply but a html line-break works as well  so you can do a html   css only solution  So it s bad practice to usually use the br element  but if you break your comment with br the text-overflow ellipsis will start on the next line of the html text

User · Answer

I found a solution however you need to know a rough character length that will fit in to your text area  then join a     to the preceeding space   The way I did this is to    assume a rough character length  in this case 200  and pass to a function along with your text split the spaces so you have one long string use jQuery to get slice the first     space after your character length join the remaining       code    truncate   function description           return description split     slice 0  description lastIndexOf     200   join                             here is a fiddle - http   jsfiddle net GYsW6 1

User · Answer

If anyone is trying to get line-clamp to work in flexbox  it s slightly trickier - especially once you are torture testing with really long words  The only real differences in this code snippet are min-width  0  in the flex item containing truncated text  and word-wrap  break-word   A hat-tip to https   css-tricks com flexbox-truncated-text  for the insight  Disclaimer  this is still webkit only as far as I know   x000D   x000D   flex-parent     display  flex      short-and-fixed     width  30px    height  30px    background  lightgreen      long-and-truncated     margin  0 20px    flex  1    min-width  0    Important for long words         long-and-truncated span     display  inline    -webkit-line-clamp  3    text-overflow  ellipsis    overflow  hidden    display  -webkit-box    -webkit-box-orient  vertical    word-wrap  break-word    Important for long words       x000D   lt div class  flex-parent  gt     lt div class  flex-child short-and-fixed  gt     lt  div gt     lt div class  flex-child long-and-truncated  gt       lt span gt asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd lt  span gt     lt  div gt     lt div class  flex-child short-and-fixed  gt     lt  div gt   lt  div gt  x000D   x000D   x000D   http   codepen io AlgeoMA pen JNvJdx  codepen version

User · Answer

As others have already answered  a pure CSS solution does not exists  There is a jQuery plugin that is very easy to use  it is called dotdotdot  It uses the container s width and height to calculate if it needs to truncate and add ellipsis       multilinedElement   dotdotdot      Here is a jsFiddle

User · Answer

A requirement for text-overflow  ellipsis  to work is a one-line version of white-space  pre  nowrap etc   Which means the text will never reach the second line   Ergo  Not possible in pure CSS   My source when I was looking for the exact same thing just now  http   www quirksmode org css textoverflow html  Quirksmode ftw    EDIT If the good CSS gods will implement http   www w3 org TR css-overflow-3  max-lines we can haz this in pure CSS using fragments  new  and max-lines  new   Also some more info on http   css-tricks com line-clampin   EDIT 2 WebKit Blink has line-clamp  -webkit-line-clamp  2 will put ellipsis on 2nd line

User · Answer

This should work in webkit browsers  overflow  hidden  text-overflow  ellipsis  display  -webkit-box  -webkit-line-clamp  3  -webkit-box-orient  vertical   browser support  x000D   x000D  div     overflow  hidden    text-overflow  ellipsis    display  -webkit-box    -webkit-line-clamp  3    -webkit-box-orient  vertical         font-family  verdana    x000D   lt div gt     The  lt b gt  lt a target   blank  href  https   developer mozilla org docs Web CSS -webkit-line-clamp  gt -webkit-line-clamp lt  a gt  lt  b gt  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  lt b gt -webkit-box lt  b gt  or  lt b gt -webkit-inline-box lt  b gt  and the  lt b gt -webkit-box-orient lt  b gt  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   lt  div gt  x000D   x000D   x000D

User · Answer

All the answers here are wrong  they missing important piece  the height   container      width 200px      height 600px      background red    title           overflow  hidden          line-height  20px          height  40px          text-overflow  ellipsis          display  -webkit-box          -webkit-line-clamp  2          -webkit-box-orient  vertical         lt div class  container  gt       lt div class  title  gt this is a long text you cant cut it in half lt  div gt   lt  div gt

User · Answer

I have used the jQuery-condense-plugin before  which looks like it can do what you want  If not  there are different plugins that might suit your needs   Edit  Made you a demo - note that I linked the jquery condense js on the demo which does the magic  so full credit to the author of that plugin

[html] css ellipsis on second line

Examples related to html

Examples related to css