html - すべての行情報を表示しない (「表示」を押したときのみ)

Question

奇妙な質問があります。簡単なメモの作成/削除フォームと、それらすべてをクエリするスクリプトを作成しました。

行の一部のコンテンツのみを表示し、「すべて表示」などを押すと残りのコンテンツを表示するスクリプトを提案してください。例えば ​​：

Answer 1

コンテンツ文字列の切り捨てを調べる必要があります。JavaScript と PHP ベースのソリューションの両方について、ここで利用できる回答がたくさんあります。

JavaScript: javascript を使用して長い文字列を短縮するスマートな方法
PHP: "..." 本体で文字列を短縮する

したがって、最初に切り捨てられた文字列を表示し、次に完全なビューで元の文字列を使用します。

例のテーブルの設定方法によっては、CSS を使用して切り捨てて、省略記号も追加することもできます。

CSS: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Answer 2

さて、私はあなたがこのようなものが欲しいと思います:
Live jsfiddle

js

$(function()
{
    var maxShow = 50;
   $( ".holder" ).each(function() 
   {
       var txt = $(this).text();
       txt = txt.substr(0,maxShow)+' ...';
       $(this).prev().prev().text(txt);
   });
  $(".show").click(function()
  {
      var txt = $(this).next('span').text();
      $(this).parent().text(txt);
  });
});

html

<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 0 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 1 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 2 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>

CSS

.holder
{
  display:none;
}