javascript - 如果描述的字数超过一定数量，请切断描述？

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 来查看 a divor<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 隐藏（折叠）元素内容的一部分并添加“阅读更多”链接，以便用户可以根据需要查看文本。默认情况下，展开的内容后跟一个“少读”链接，用户可以单击该链接重新折叠它。展开的内容也可以在指定的时间段后重新折叠。

通过 CSS，我知道您可以使用overflow: hidden,text-overflow: ellipsis和white-space: nowrap，但我相信只有在一行时才有效，所以如果它是较长的文本，我建议使用 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) + '...';