html - 不显示所有行信息（仅当我按“查看”时）

Question

我有一个奇怪的问题！我做了一个简单的创建/删除笔记表单和一个脚本来查询它们。但是如果有人插入一个 100KM 的笔记并且表格显示了它就不会很漂亮。

我请您向我推荐一个仅显示该行的某些内容的脚本，其余的则在您按“查看全部”之类的内容时显示。例如 ：

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