Search code examples
javascripthtmlcssword-wrap

Is it possible to wrap lots of text exactly three times, then add a more link?


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?


Solution

  • 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