php - wordwrap z html

Question

problem jest prosty:

Korzystanie tinyMCE, jestem przechowywania danych html do bazy danych. Następnie na stronie głównej pokazuję 5 najnowszych wpisów, które wstawiłem do bazy danych. Chcę przyciąć każdy z tych słupów do określonej długości, jeśli przekroczą one i umieści link continue reading (może to być tutaj miękkie uprawianie, nie musi być sztywne).

Łatwo byłoby przyciąć ciąg za pomocą funkcji php: wordwrap, ale ponieważ ciąg składa się z html, nie chcę zepsuć kodu HTML przez przycięcie go z niewłaściwego miejsca.

Pytanie brzmi więc: czy istnieje prosty sposób na przycięcie tego (może to być również css, rozwiązanie javascript) lub czy mam napisać długą funkcję z wieloma kontrolami do wdrożenia takiej podstawowej funkcji? Myślałem o używaniu klasy DOM, ale przed stworzeniem funkcji chciałem cię tylko zapytać.

EDIT

Styling jest niezbędna do mnie. Tak więc nie ma możliwości usunięcia znaczników.

Z góry dziękuję.

Answer 1

Możliwym rozwiązaniem byłoby rozebrać tagów, jeśli stylizacji tej HTML nie jest niezbędna, więc można wyciąć, gdzie chcesz: http://php.net/manual/es/function.strip-tags.php

Innym rozwiązaniem dla przeglądarek CSS3, byłoby wykorzystanie text-overflow , przeczytaj więcej na ten temat: http://davidwalsh.name/css-ellipsis

Answer 2

zakładając używasz 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;} 

Wystarczy dowód koncepcji. Wymaga optymalizacji JS: