php - wordwrap mit html

Question

Das Problem ist einfach:

Mit tinyMCE, ich HTML-Daten in die Datenbank zu speichern. Dann auf der Homepage, zeige ich 5 letzte Posts, die ich in die Datenbank eingefügt habe. Ich möchte jeden dieser Pfosten auf die angegebene Länge zuschneiden, wenn sie ihn überschreiten und einen continue reading Link setzen (kann eine weiche Ernte hier sein, muss nicht starr sein).

Es wäre leicht, die Zeichenfolge mit PHP wordwrap Funktion zu beschneiden, aber da die Zeichenfolge aus HTML besteht Ich möchte nicht den HTML-Code ruinieren, indem Sie es von einem falschen Ort beschneiden.

Also die Frage ist: Gibt es eine einfache Möglichkeit, dies zu beschneiden, (kann eine css, Javascript-Lösung auch sein) oder habe ich eine lange Funktion mit vielen Prüfungen, um eine solche grundlegende Funktion zu implementieren? Ich dachte daran, die DOM Klasse zu verwenden, aber bevor ich die Funktion erstellte, wollte ich Sie nur fragen.

EDIT

Styling ist mir wesentlich. Es gibt also keine Möglichkeit, die Tags zu entfernen.

Vielen Dank im Voraus.

Answer 1

Eine mögliche Lösung könnte sein, Tags abzustreifen, wenn das Styling dieser HTML nicht lebenswichtig ist, kann so schneiden Sie, wo immer Sie wollen: http://php.net/manual/es/function.strip-tags.php

Eine andere Lösung für CSS3-Browser, wäre Textüberlauf zu verwenden, lesen Sie mehr über diese: http://davidwalsh.name/css-ellipsis

Answer 2

vorausgesetzt, Sie jQuery verwenden

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

     }) 
    }) 

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

nur ein Proof of Concept. Needs JS Optimierung