php - wordwrap con html

Question

Il problema è semplice:

Utilizzando tinyMCE, sto memorizzazione dei dati html nel database. Poi nella home page, sto mostrando gli ultimi 5 post che ho inserito nel database. Voglio ritagliare ciascuno di questi messaggi alla lunghezza specificata se lo superano e inserire un collegamento continue reading (può essere un raccolto morbido qui, non deve essere rigido).

Sarebbe facile per ritagliare la stringa con la funzione di php wordwrap ma dal momento che la stringa è composta da html Non voglio rovinare il codice html con lo strumento taglierino da un posto sbagliato.

Quindi la domanda è: c'è un modo semplice per ritagliare questo, (può essere anche una soluzione css, javascript) o devo scrivere una funzione lunga con molti controlli per implementare una funzione di base? Stavo pensando di usare la classe DOM ma prima di creare la funzione volevo solo chiederti ragazzi.

EDIT

Styling è essenziale per me. Quindi non c'è la possibilità di togliere i tag.

Grazie in anticipo.

Answer 1

Una possibile soluzione potrebbe essere quella di togliere i tag, se lo stile di questo codice HTML non è vitale, in modo da poter tagliare dove si vuole: http://php.net/manual/es/function.strip-tags.php

Un'altra soluzione per i browser CSS3, sarebbe quella di utilizzare il testo di overflow , saperne di più su questo: http://davidwalsh.name/css-ellipsis

Answer 2

a patto di utilizzare jQuery

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

     }) 
    }) 

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

solo un proof of concept. Richiede l'ottimizzazione JS