Question

如果文本较长，例如200个字母，如何在元素内显示一定长度的文本，并且如果文本较长则显示点数。然后在修改后的文本后附加...作为链接。当用户点击这些点显示全文时。对不起，我的英语很差。 HTML：

<div>
  <span="small2">TEXT MORE THEN 200 letters</span> <!-- Show 200 letters with dots as link -->
  <span="small2">TEXT LESS THEN 200 letters</span> <!-- Show full text without dots -->
</div>

我的Jquery（不完整，因为我不是专业人士）：

$(".small2").each(function(){
    fulltext = $(this).text();
    if ($(this).text().length > 200) {
       $(this).text($(this).text().substr(0, 186));
       $(this).append('<a href="#">...</a>>');
    }
});

Answer 1

一个简单的jQuery实现：

$(".small2").each(function () {
    text = $(this).text();
    if (text.length > 200) {
        $(this).html(text.substr(0, 186) + '<span class="elipsis">' + text.substr(186) + '</span><a class="elipsis" href="#">...</a>');
    }
});
$(".small2 > a.elipsis").click(function (e) {
    e.preventDefault(); //prevent '#' from being added to the url
    $(this).prev('span.elipsis').fadeToggle(500);
});

HTML：

<div>
    <span class="small2">TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 letters TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200 TEXT MORE THEN 200</span> 
    <span class="small2">TEXT LESS THEN 200 letters</span> 
</div>

小提琴：http://jsfiddle.net/KZ4TV/5/

Answer 2

您的HTML代码错误，应该是这样的：

<div>
  <span class="small2">qwertyuiopasdfghjklzxcvbnm</span> <!-- Show 200 letters with dots as link -->
  <span class="small2">abcd</span> <!-- Show full text without dots -->
</div>

有效：http://jsfiddle.net/MXC5L/

Answer 3

对两个跨度使用 ID 这是跨度的CSS。
#Span_ID

{
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 91px;
 }

这里你可以改变宽度，这取决于你想要显示的文本的长度。

在此之后，您必须在脚本标记中包含 mootools-core-1.4.5-full-nocompat.js 文件。因为没有这个，文本溢出：省略号将无效。

在此之后使用jQuery ToolTip在工具提示中显示完整的文字。

以下是JSFIDDLE示例

文字很长时显示短文？

3 个答案: