php - wordwrap with html

Question

The problem is simple:

Using tinyMCE, I am storing html data into the database. Then at the home page, I am showing 5 latest posts I've inserted into the database. I want to crop each of these posts to the specified length if they exceed it and put a continue reading link (can be a soft crop here, doesn't have to be rigid).

It would be easy to crop the string with php's wordwrap function but since the string is composed of html I don't wanna ruin the html code by cropping it from a wrong place.

So the question is: Is there an easy way to crop this, (can be a css, javascript solution as well) or do I have a write a long function with lots of checks to implement such a basic feature? I was thinking to use the DOM class but before creating function I just wanted to ask you guys.

EDIT

Styling is essential to me. So there is no possibility to strip the tags.

Thanks in advance.

Refer :http://stackoverflow.com/questions/4682878/apply-wordwrap-to-html-content-excluding-html-attributes — Arvind, Mar 29 '13 at 18:23
The page was already opened in the other tab :) Actually I got the DOM idea from that post :) @Arvind — Savas Vedova, Mar 29 '13 at 18:24

score 2 · Answer 1 · answered Mar 29 '13 at 18:10

2

One possible solution could be to strip tags, if the styling of this HTML is not vital, so you can cut wherever you want: http://php.net/manual/es/function.strip-tags.php

Another solution for CSS3 browsers, would be to use text-overflow, read more about this: http://davidwalsh.name/css-ellipsis

answered Mar 29 '13 at 18:10

netadictos

7,602
2
42
69

Unfortunately the first option is not possible. As for the second option I've already considered that. But still, how can one add continue reading link by using css? – Savas Vedova Mar 29 '13 at 18:18

score 0 · Answer 2 · answered Mar 29 '13 at 18:57

assuming you use jQuery

the javascript

     $(function () {
        $('p').filter(function () {
           return $(this).height() > 50;
        }).addClass('collapsed').css('position', 'relative').append('<a href="#" class="expand">read more</a>');
        $('.expand').on('click', function(){
           if($(this).parents('.collapsed').length)
              $(this).parents('.collapsed:first').removeClass('collapsed')
           else
              $(this).parents(':first').addClass('collapsed')

        })
     })

the css

.collapsed{overflow: hidden; height: 20px; margin-bottom: 10px; position: relative}
.expand{position: absolute; right: 0; bottom: 0; background: #fff; padding: 0 0 0 15px;}

Just a proof of concept. Needs JS optimization

I've already found such a plugin: http://dotdotdot.frebsite.nl/. The only problem with jQuery is that it waits till the page loads so the content first loads as it has to, then it gets cropped (even when using overflow: hidden there is a piece of text which appears and renders the display awkward). Although, not the perfect one, if I cannot find a better solution I will accept this answer as correct. Thanks a lot for the suggestion. — Savas Vedova, Mar 29 '13 at 19:07

php - wordwrap with html

2 Answers2