PHP - HTML

Question

とワードラップの問題は単純です：tinyMCEを使用して

、私はデータベースにHTMLデータを格納しています。その後、ホームページに、私がデータベースに挿入した5つの最新の投稿を表示しています。私は、これらの投稿をそれぞれ指定された長さに切り抜いて、それを超えてcontinue readingリンクを貼りたいとします（ここではソフト作成が可能であり、厳格である必要はありません）。

phpのwordwrap関数で文字列を切り抜くのは簡単ですが、文字列はhtmlで構成されているので、間違った場所から切り抜いてhtmlコードを壊したくありません。

これは簡単な方法です（これはCSSでも、JavaScriptのソリューションでも可能です）か、このような基本機能を実装するために多くのチェック機能を備えた長い関数を作成する必要がありますか？私はDOMクラスを使用することを考えていましたが、機能を作成する前に私はちょうどあなたたちに尋ねたがっていました。

EDIT

スタイリングは私には不可欠です。したがって、タグを取り除くことはできません。

ありがとうございます。

Answer 1

一つの可能​​な解決策このHTMLのスタイリングが不可欠ではない場合、あなたが好きな場所切ることができるように、タグを除去することができますCSS3ブラウザ用 http://php.net/manual/es/function.strip-tags.php

別の解決策は、テキストオーバーフローを使用することです、これについての詳細をお読みください。 http://davidwalsh.name/css-ellipsis

Answer 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の最適化が必要