当文本很长时显示短文本? [英] Show short text when text is long?

问题描述

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

<span="small2">TEXT MORE THEN 200 个字母</span><!-- 显示 200 个带点的字母作为链接 --><span="small2">TEXT LESS THEN 200 个字母</span><!-- 显示不带点的全文-->

我的 Jquery(未满，因为我不专业):

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

解决方案

一个简单的 jQuery 实现:

$(".small2").each(function() {text = $(this).text();如果(文本长度> 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();//防止'#'被添加到url$(this).prev('span.elipsis').fadeToggle(500);});

HTML:

<span class="small2">TEXT MORE THEN 200 个字母 TEXT MORE THEN 200 个字母 TEXT MORE THEN 200 个字母 TEXT MORE THEN 200 个字母 TEXT MORE THEN 200 个字母 TEXT MORE THEN 200 个文字 MORE THEN 200 个文字 MORE THEN 200200 文本多于 200<span class="small2">TEXT LESS THEN 200 个字母</span>

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

How to show certain length of text inside element and apend dots if text is longer for example than 200 letters. Then append ... as link after modified text. When user clicks on those dots show full text. Excuse me my english is very poor. 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>

My Jquery(not full because I am not pro):

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

解决方案

A simple jQuery implementation:

$(".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>

Fiddle: http://jsfiddle.net/KZ4TV/5/

这篇关于当文本很长时显示短文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！