减少摘要中的文本数量答案

【问题标题】：reducing amount of text in a summary减少摘要中的文本数量
【发布时间】：2013-05-16 08:24:14
【问题描述】：

通常在诸如食谱之类的网站中，人们会看到大量文本（例如食谱方法），其中并非所有文本都显示为“更多...”超链接，可以单击该超链接以显示所有内容.

我正在尝试做类似的事情，但正如我目前所拥有的那样，我将 height 属性应用于相关的 div 元素，从而减少了文本的数量。

topicGenerator.InnerHtml += "<div class='productList summaryContainer'>";
topicGenerator.InnerHtml += "<div class='productListTumbnail'>";
topicGenerator.InnerHtml += "<img src ='Images/ScreenShots/" + productCode + ".jpg' alt='Health and Safety'>";
topicGenerator.InnerHtml += "</div>";
topicGenerator.InnerHtml += "<div class='productListContent'>";
topicGenerator.InnerHtml += "<h3>" + productName + "</h3>";
topicGenerator.InnerHtml += summary;
topicGenerator.InnerHtml += "</div>";
topicGenerator.InnerHtml += "</div>";

.summaryContainer
{
height:120px;
overflow:hidden;
}

这远非理想。在单击相关超链接（例如更多...）时，我是否可以在扩展摘要文本数量方面提供一些帮助，或者可能只是减少一定数量文本（html）然后在单击时重定向到不同页面的好方法相关的超链接。

【问题讨论】：

您可以结合使用 Jordan Trudgett 和 pouki06 答案。如果文本超过一定大小，您可以限制显示的文本并添加更多按钮。然后当单击更多按钮时，您可以将所有文本插入到 div 中。

标签： c# javascript html css

【解决方案1】：

为什么不使用Substring Method：

summary.Substring(0, 200) //Prints 200 first chars.

【讨论】：

【解决方案2】：

你可以使用jQuery来实现一个简单的隐藏块。

<p>Here is the start of my text. Some more text will follow after you click the "More" link.</p>
<span id="moreLink"><a href="javascript:;" onClick="$('#moreLink').hide(); $('#moreStuff').show();">More...</a></span>
<div id="moreStuff" style="display: none;">
    <p>Here is the body of the text. Some more text here. This stuff is initially hidden. You can put more text in here, etc.</p>
    <p>Another paragraph inside the body.</p>
</div>

jsFiddle demo

【讨论】：

【解决方案3】：

为什么不使用 jQuery？

就这么简单：

$('#more').click(function() {
    $('#content').toggle();
});

<a id="more">more</a>
<div id="content" style="display:none;">lot of text</div>

见：http://api.jquery.com/toggle/

【讨论】：