Question

我很好奇，所以我在某些网站专门写博客。我看到他们的博客是这样的：

CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE

但是他们的描述类似于

CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
CONTENT HERE CONTENT...

我想知道是否必须使用javascript或php来查看div或<p>是否包含太多单词并相应地将其删除？我不确定这个术语。无论如何，我尝试设置div的最大高度，它会切断内容，但我希望它在被切断的部分后添加...或read more->。有人可以提供有关如何实现这一目标的见解吗？感谢。

Answer 1

您可以试试这个，但它缺乏Firefox支持：

text-overflow: ellipsis;

此处有更多信息：http://davidwalsh.name/css-ellipsis

Answer 2

有一个jQuery插件可以做到这一点。您可以在此处找到它：http://plugins.learningjquery.com/expander/

网站概述如下：

Expander Plugin隐藏（折叠）元素内容的一部分，并添加＆＃34;阅读更多＆＃34;如果他或她希望，用户可以查看该文本。默认情况下，展开的内容后跟一个＆＃34; read less＆＃34;用户可以单击以重新折叠它的链接。扩展内容也可以在指定的时间段后重新折叠。

通过CSS，我知道您可以使用overflow: hidden，text-overflow: ellipsis和white-space: nowrap，但我相信只有在它只有一行的情况下才有效，所以我＆＃39;如果它是较长的文本，请建议使用jQuery方法。

Answer 3

theString = 'CONTENT HERE'; //can be dom element innerhtml/jQuery.html() as well
if(theString.length>100){
   theString = theString.substr(0,100)+'...';
   theString += '<div><a>Read More</a></div>'; //target area you need to place read more link
}
jQuery('.element').html(theString);

在此之后，您可以在切断数量之后更换所有内容......

如果你想将readmore放在一个单独的div / string中，你可以很容易地使用jquery来定位新区域。

Answer 4

您可以使用它来修剪字符串，添加...然后将其替换为html。修改或编写一个包装器，以便根据需要添加...。

sDisplay = sFull.substr(0,50) + '...';

切断描述是否超过一定数量的单词？

4 个答案: