4

I need to trim a dynamic text in order to make a 2 lines excerpt out of it (a teaser). The problem is that the number of lines that takes a displayed string within a div depends on the characters used (for instance,"w" and i" will not have the same width), the browser and the OS (a font on Mac is not exactly equal to the same font on Windows).

Is there a way, in javascript, to trim a text that would be longer than x lines within a div (knowing that the div length is fixed)?

Thank you.

Improve this question
5
  • 1
    So, you're not looking specifically for newline characters, but rather the amount of text that will reflow into a given div? Commented May 26, 2012 at 0:56
  • How about using CSS' text overflow properties instead of measuring stuff with JavaScript (which is inevitably messy)? Commented May 26, 2012 at 0:58
  • What would the css "overflow" property do as I need to cut the text right before it reaches the third line and add something like "read more"? Thank you Commented May 26, 2012 at 1:00
  • @sarnold: I'm sorry, I don't get your question. What I need is to cut the text within the div in order to keep the first two lines of it. As the text would be generated, I can't predict its content so I can't predict its exact lenght. Have a look at my question here above. Imagine I want to keep the first two lines and add "Read more" just after. Is it clear enough? Thank you. Commented May 26, 2012 at 1:04
  • You might get pretty close by using HTML5 Canvas measureText(); keep adding words until you surpass the width of your container, and do that again for a second line. Commented May 26, 2012 at 1:26

1 Answer 1

Reset to default
4

you can use something like that http://jsfiddle.net/cSTzn/ by using overflow: hidden; and proper height

EDIT: made update with link on the bottom right, customize as necessary http://jsfiddle.net/cSTzn/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Though the downside is the hidden text isn't hidden very well -- and still easily selectable. (Which isn't a big deal if it is all short... if it is going to be huge, perhaps it shouldn't be downloaded at all...?)
Thank you but it's not what I need. I want to create an excerpt. A kind of teaser of a larger text by keeping the first two lines of the text and allow the user to click a link to see the whole content. It's something very usual on Wordpress for instance. It's not about "hiding" visually the right or bottom part of a text. Css Will not help on this issue. Thank you.
I really thank you for your help. You solution is almost ok but you can see the problem with it: the text behind the "read more" is not readable. My ultimate goal would be to end the second line with: "whatever is the end of the second line....(read more)". Is there no javascript functions which would allow me to know which words are ending the second line and delete whatever is after?
I am not aware of a way to calculate the end of the 2nd line, if you can use font that is fixed size then it is doable, otherwise you have to trim and check the hight of the container and the height of the content while trimming and stop when the content fits, but I already don't like that solution
Thank you. Unfortunately, there is no web font having a fixed size and being cross-browser and cross-OS. Strange as these "teasers/excerpts" can be found very often in modern content management systems nowadays. I really don't know how they achieve this...
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.