Geek asks and answers

Php - wordwrap with html

The problem is simple:

Using tinyMCE , I store html data in a database. Then on the homepage I show the 5 last posts that I inserted into the database. I want to trim each of these records to a specified length if they exceed it and put a link continue reading(there may be a soft culture, it should not be hard).

It would be easy to trim the string using the php function wordwrap, but since the string consists of html, I don't want to destroy the html code by truncating it due to the wrong place.

So the question is this: is there a simple way to trim this (maybe also a css, javascript solution) or do I have a long write function with a lot of checks to implement such a basic function? I was thinking of using a class DOM, but before creating the function, I just wanted to ask you guys.

EDIT

I really like the style. Thus, there is no way to break tags.

Thanks in advance.

+5
source share
2 answers

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

CSS3 , : http://davidwalsh.name/css-ellipsis

+2

, jQuery

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')

        })
     })

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;}

. JS

0

More articles:


All Articles