-1

I have a long description of something, it has been requested that my HTML magically detect when the text has wrapped three times, cut off the text, and add a "more..." link appended to the last of the 3rd line of the text.

Is this even possible? And if so, how do I do this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jrud
  • 1,004
  • 9
  • 25

1 Answers1

1

Unless you're using a mono-spaced font, it won't be too easy, since different letters are different width. If you are fine with a count of characters, you could calculate do a JS method and only populate a sub-string of your found length and make a link/ellipsis to denote there is more.

A method you can use to accomplish your goal is to use div tag with a height of exactly your 3 lines of text (you will have some trial/error) and specify your desired width. HTML will auto-wrap within this width. You then need to give the div tag the style property of overflow:hidden.

Doing this will hide the remaining text after 3 lines.

Then you can left/right justify a "More..." link below... I would do this programmatically in the JS so you don't have a "More..." link after a description equal or less than 3 lines

TylerH
  • 20,799
  • 66
  • 75
  • 101
Ray K
  • 1,452
  • 10
  • 17
  • Here is another good article with other options: http://stackoverflow.com/questions/4748798/html-css-specify-number-of-lines-inside-span. (There is a good CSS3 solution). – Ray K Nov 15 '11 at 19:52