Text overflow ellipsis on two lines

Question

I know you can use a combination of CSS rules to make text end with ellipsis       when it s time to overflow  get out of parent s bounds    Is it possible  feel free to just say  no  to achieve the same effect  but let the text wrap on more than one line   Here s a demo   div     width  300px     height  42px     overflow  hidden     text-overflow  ellipsis     white-space  nowrap      As you can see  the text ends with ellipsis when it goes wider than the div s width  However  there is still enough space for the text to wrap on a second line and go on  This is interrupted by white-space  nowrap  which is required for the ellipsis to work   Any ideas   P S   No JS solutions  pure CSS if possible

User · Answer

Use this if above is not working  display  -webkit-box   max-width  100    margin  0 auto   -webkit-line-clamp  2      autoprefixer  off     -webkit-box-orient  vertical      autoprefixer  on     overflow  hidden   text-overflow  ellipsis

User · Answer

Restricting to few lines will work in almost all browsers  but an ellipsis 3 dots  will not be displayed in Firefox  amp  IE  Demo - http   jsfiddle net ahzo4b91 1   div   width  300px  height  2 8em  line-height  1 4em  display  flex  -webkit-line-clamp  2  display  -webkit-box  -webkit-box-orient  vertical  overflow  hidden

User · Answer

Easy CSS properties can do the trick  The following is for a three-line ellipsis   display  -webkit-box  -webkit-line-clamp  3  -webkit-box-orient  vertical  overflow  hidden  text-overflow  ellipsis

User · Answer

Not sure what your target is  but do you want the text to come on the second line    Here is your jsFiddle  http   jsfiddle net 8kvWX 4  just removed the following        white-space nowrap      Im not sure if this is what your are looking for or not   Regards   Mee

User · Answer

Take a look at this pure css version  http   codepen io martinwolf pen qlFdp  display  -webkit-box  max-width  400px  height  109 2px  -webkit-line-clamp  3  -webkit-box-orient  vertical  overflow  hidden  text-overflow  ellipsis  line-height  1 625

User · Answer

My solution reuses the one of amcdnl  but my fallback consist of using a height for the text container    my-caption h4       display  -webkit-box      margin  0 auto      -webkit-line-clamp  2      -webkit-box-orient  vertical      overflow  hidden      text-overflow  ellipsis       height  40px    Fallback for non-webkit

User · Answer

Base on an answer I saw in stackoveflow  I created this LESS mixin  use this link to generate the CSS code     max-lines  lines  3   line-height  1 2      overflow  hidden    text-overflow  ellipsis    display  -webkit-box    -webkit-box-orient  vertical    -webkit-line-clamp   lines    line-height   line-height    max-height   line-height    lines      Usage   example-1        max-lines        example-2        max-lines 3       example-3        max-lines 3  1 5

User · Answer

You can use a dissolved out effect instead of ellipsis  pure CSS and looks more professional       lt div style  quot width  293px  height 48px  overflow  hidden   quot  gt          More than two line of text goes here-More than two line of text goes here      lt  div gt       lt div style  quot position  relative  top  -24px  width  293px  height 24px                background  linear-gradient 90deg  rgba 255 0 0 0  40   rgba 255 255 255 1  99    quot  gt       lt  div gt   Here I have assumed your background color is white

User · Answer

This is a total hack  but it works   http   jsfiddle net 2wPNg   div       width  30       float  left      margin-right  2       height  94px      overflow  hidden      position  relative     div after        display  block        content               width  1em    height  1 5em    background   fff    position  absolute    bottom  -6px    right  0          It does have problems     it might cut off a letter awkwardly  and it will probably have some weird results on a responsive site

User · Answer

It seems more elegant combining two classes  You can drop two-lines class if only one row need see    x000D   x000D   ellipse   x000D            white-space  nowrap  x000D            display inline-block  x000D            overflow  hidden  x000D            text-overflow  ellipsis  x000D           x000D         two-lines   x000D            -webkit-line-clamp  2  x000D            display  -webkit-box  x000D            -webkit-box-orient  vertical  x000D            white-space  normal  x000D          x000D         width  x000D            width 100px  x000D            border 1px solid hotpink  x000D          x000D           lt span class  width ellipse  gt  x000D            some texts some texts some texts some texts some texts some texts some texts x000D          lt  span gt  x000D   x000D          lt span class  width ellipse two-lines  gt  x000D            some texts some texts some texts some texts some texts some texts some texts x000D          lt  span gt  x000D   x000D   x000D

User · Answer

Css below should do the trick   After the second line the  text will contain      line-height  1em  max-height  2em  display  -webkit-box  -webkit-box-orient  vertical  -webkit-line-clamp  2

User · Answer

Here is a simple script to manage the ellipsis using jQuery  It inspects the real height of the element and it creates a hidden original node and a truncated node  When the user clicks it switches between the two versions   One of the great benefits is that the  ellipsis  is near the last word  as expected   If you use pure CSS solutions the three dots appears distant from the last word    x000D   x000D  function manageShortMessages     x000D   x000D              myLongVerticalText   each function      x000D              if    this  0  scrollHeight  gt    this  0  clientHeight  x000D                    this  addClass  ellipsis short    x000D              x000D   x000D              myLongVerticalText ellipsis   each function      x000D              var original     this  clone   addClass  original notruncation   removeClass  short   hide    x000D                this  after original   x000D   x000D                debugger  x000D              var shortText       x000D              shortText     this  html   trim   substring 0  60           x000D                this  html shortText   x000D              x000D           x000D              myLongVerticalText ellipsis   click function      x000D                this  hide    x000D   x000D              if    this  hasClass  original    x000D                x000D                    this  parent   find   short   show    x000D                x000D              else x000D                x000D                    this  parent   find   original   show    x000D                x000D              x000D        x000D    x000D    manageShortMessages    x000D  div   x000D   border 1px solid red  x000D   margin 10px  x000D    x000D   x000D  div myLongVerticalText   x000D    height 30px  x000D    width 450px  x000D    x000D   x000D  div myLongVerticalText ellipsis   x000D   cursor pointer  x000D    x000D   x000D  div myLongVerticalText original   x000D    display inline-block  x000D    height inherit  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt body gt  x000D   lt div class  myLongVerticalText  gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Suspendisse sit amet quam hendrerit  sagittis augue vel  placerat erat  Aliquam varius porta posuere  Aliquam erat volutpat  Phasellus ullamcorper malesuada bibendum  Etiam fringilla  massa vitae pulvinar vehicula  augue orci mollis lorem  laoreet viverra massa eros id est  Phasellus suscipit pulvinar consectetur  Proin dignissim egestas erat at feugiat  Aenean eu consectetur erat  Nullam condimentum turpis eu tristique malesuada  x000D   x000D  Aenean sagittis ex sagittis ullamcorper auctor  Sed varius commodo dui  nec consectetur ante condimentum et  Donec nec blandit mi  vitae blandit elit  Phasellus efficitur ornare est facilisis commodo  Donec convallis nunc sed mauris vehicula  non faucibus neque vehicula  Donec scelerisque luctus dui eu commodo  Integer eu quam sit amet dui tincidunt pharetra eu ac quam  Quisque tempus pellentesque hendrerit  Sed orci quam  posuere eu feugiat at  congue sed felis  In ut lectus gravida  volutpat urna vitae  cursus justo  Nam suscipit est ac accumsan consectetur  Donec rhoncus placerat metus  ut elementum massa facilisis eget  Donec at arcu ac magna viverra tincidunt  x000D   lt  div gt  x000D   x000D   x000D   lt div class  myLongVerticalText  gt  x000D  One Line Lorem ipsum dolor sit amet    x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

For those working in scss  you need to add  autoprefixer to the start of the comment so that it is preserved for postcss   I faced that issue that s why posting it here  line-height  1em  max-height  2em  display  -webkit-box      autoprefixer  off    -webkit-box-orient  vertical  -webkit-line-clamp  2    Reference

User · Answer

text-overflow  ellipsis            overflow  hidden            text-overflow  ellipsis            display  -webkit-box            line-height  36px            max-height  18px            -webkit-line-clamp  2            -webkit-box-orient  vertical    I ve found a combo of both line-clamp and line-height works  D

User · Answer

I m not sure if you have seen THIS  but Chris Coyier s excellent CSS-Tricks com posted a link to this a while back and it s a pure CSS solution that accomplishes exactly what you seek   Click to View on CodePen  HTML   lt div class  quot ellipsis quot  gt       lt div gt           lt p gt              Call me Ishmael  Some years ago     never mind how long precisely     having             little or no money in my purse  and nothing particular to interest me on             shore  I thought I would sail about a little and see the watery part of the             world  It is a way I have of driving off the spleen  and regulating the             circulation  Whenever I find myself growing grim about the mouth  whenever it             is a damp  drizzly November in my soul  whenever I find myself involuntarily             pausing before coffin warehouses  and bringing up the rear of every funeral I             meet  and especially whenever my hypos get such an upper hand of me  that it             requires a strong moral principle to prevent me from deliberately stepping             into the street  and methodically knocking people s hats off     then  I account             it high time to get to sea as soon as I can           lt  p gt       lt  div gt   lt  div gt   CSS  html body p       margin  0      padding  0      font-family  sans-serif     ellipsis       overflow  hidden      height  200px      line-height  25px      margin  20px      border  5px solid  AAA     ellipsis before       content   quot  quot       float  left      width  5px      height  200px     ellipsis  gt    first-child       float  right      width  100       margin-left  -5px     ellipsis after       content   quot  02026 quot       box-sizing  content-box      -webkit-box-sizing  content-box      -moz-box-sizing  content-box      float  right      position  relative      top  -25px      left  100       width  3em      margin-left  -3em      padding-right  5px      text-align  right      background-size  100  100     512x1 image gradient for IE9  Transparent at 0  - gt  white at 50  - gt  white at 100         background-image url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC xhBQAAAwBQTFRF                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            AAAA                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9 ggOZxrBtpRRo94gxItwLOoX vsHdA2yGgL8 TdKUK8VFufmHSGgAQWJNc9tk rb5KMCA8aM0iwpWV6dwP9 fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8 vgHBfr2CvTyDu8R7esU6RcZ5ecc4 Af3iLcJSjZ1ivT0S PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2 F nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl 4yrDsYoVx JYz7mXXNSp a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO 2ZdD9MFe56Y9z3LUG96mcX02n CW71JH6Qmf8px cw77ZvVzB BCj8D5vxhn vXZh6D4uzf1rN Cc347j79q zUL25TPrJMfG 5LvuNZP8rixeZz mf vU Vut 5NL5gPOeb sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8 qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC       background  -webkit-gradient linear left top right top          from rgba 255 255 255 0   to white  color-stop 50  white            background  -moz-linear-gradient to right rgba 255 255 255 0  white 50  white           background  -o-linear-gradient to right rgba 255 255 255 0  white 50  white           background  -ms-linear-gradient to right rgba 255 255 255 0  white 50  white           background  linear-gradient to right rgba 255 255 255 0  white 50  white          Of course  being a pure CSS solution means that it s also a pretty complicated one  but it works cleanly and elegantly  I will assume that Javascript is out of the question because this is much easier to achieve  and arguably more degradable  with Javascript  As an added bonus  there s a downloadable zip file of the complete process  if you want to understand it and all   but also a SASS mixin file so that you can fold it into your process easy-peasy  Hope this helps  http   www mobify com blog multiline-ellipsis-in-pure-css

User · Answer

In my angular app the following style worked for me to achieve ellipsis on the overflow of text on the second line     lt div style  height 45px  overflow  hidden  position  relative   gt        lt span class   block h6 font-semibold clear  style  overflow  hidden          text-overflow  ellipsis          display  -webkit-box           line-height  20px     fallback            max-height  40px     fallback            -webkit-line-clamp  2     number of lines to show            -webkit-box-orient  vertical   gt             event  name    lt  span gt    lt  div gt    Hope it helps someone

[html] Text overflow ellipsis on two lines

Examples related to html

Examples related to css