I'm making a detail page about certain items. This detail page can contain large blocks of text, and the customer would like to only show the first 100 letters and then put a " ... more " at the end.
When the user clicks this " ... more " the rest of the text can be shown.
Biggest problem: the text is currently is a CMS and has large varieties. Some is pure text, some have html elements in them ...
I tried to cut off the text and put them in spans. Then i could show/hide these spans as i please. The issue here is that there can be a starting element of a certain tag in the first span and the closing element can be in the second span. This causes the DOM hierarchyto be faulty and the result is never pretty.
Does anyone know a ( other ) way to achieve this or a library i can use ?
To be able to extract "readable" characters you need to get the content into a plain text format (get rid of the mark-up).
Since the content is stored in a cms it is likely that the content is structured to be well formed - thus xhtml. If that is the case you can treat the content as XML. Get the root node and get the innertext property there-of. Then you will have plain text - no tags - and can easily cut it after the first 100 characters or whatever the requirement is.
Hopefully the content doesn't contain js/css!
Edit: It seems that the markup must be retained. Try the following xsl to transform and truncate the content: https://gist.github.com/allen/65817