Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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