5

問題は簡単です：

tinyMCEを使用して、html データをデータベースに保存しています。次に、ホームページに、データベースに挿入した最新の 5 件の投稿を表示しています。これらの投稿のそれぞれが指定された長さを超える場合は、指定された長さに切り取り、continue readingリンクを配置したいと思います (ここではソフトな切り取りでかまいませんが、厳密である必要はありません)。

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

質問は次のとおりです。これをトリミングする簡単な方法はありますか (css、javascript ソリューションでもかまいません)、またはそのような基本機能を実装するために多くのチェックを使用して長い関数を記述しますか? クラスを使おうと思っていたのDOMですが、関数を作る前に皆さんにお聞きしたかったのです。

編集

スタイリングは私にとって不可欠です。したがって、タグを削除する可能性はありません。

前もって感謝します。

4

2 に答える 2

2

考えられる解決策の 1 つは、この HTML のスタイリングが重要でない場合、タグを削除することです 。

CSS3 ブラウザーの別の解決策は、テキスト オーバーフローを使用することです。詳細については、http: //davidwalsh.name/css-ellipsisを参照してください。

于 2013-03-29T18:10:11.133 に答える
0

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

于 2013-03-29T18:57:32.973 に答える