2

我有一个文本文件，用户在其中写一些东西，我用该文本框的 javascript 获取文本并将其显示在一个段落中。我对该段落有文本限制，例如 50 个 chrac。如果用户写了超过 50 个 chrac，我想在 45 个 chrac 之后显示 (...)。可以使用javascript吗？

就像这是用户写的段落及其超过 50 个字符。

Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

我想把它显示为

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidudunt (.....)

可以使用javascript吗？

4

6 回答 6

2 
$('textarea').on('keyup', function() {
    var v = this.value.length > 50 ? this.value.substr(0,45) + '(...)' : this.value;
    $('#result').text( v );
});

小提琴

以下是你如何在最后一句话中切断它：

小提琴

于 2013-09-30T11:53:24.667 回答
1

...对于集合中的每个元素，如果文本长度超过 50 个字符，则以下内容将在 45 个字符后附加 ( )。

elem = $('p');

elem.each(function(){
   curTxt = $(this).text();
    $(this).text(curTxt.length > 50 ? curTxt.substring(0,45)+'...' : curTxt);
});

JSFiddle

于 2013-09-30T11:57:56.390 回答
1

是的，这是可能的。您可以使用下一个函数缩短您的字符串：

var str = 'Lorem ipsum...'; var shortedStr = str.substr(0,50) + '(...)';

无论如何，您可以通过 CSS 自动完成。你已经在这里得到了这个主题的答案：

用 CSS 截断长字符串：可行吗？

于 2013-09-30T11:59:38.327 回答
1

您可以设置这样的全局解决方案：

<p class="truncate">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

您可以使用类截断每个段落truncate：

$('.truncate').each(function (el, index) {
    $el = $(el);
    $el.text($el.text().substr(0, 50) +' (...)');
});
于 2013-09-30T12:01:34.627 回答
0

这也可以在 CSS 中完成，以获得更好的结果。

.ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

这样，无论其内容是什么，文本总是会在尽可能接近元素末尾的位置被截断。这看起来比看似随机的截断要好得多。

于 2013-09-30T11:58:12.550 回答
0

在这里检查这个 jsfiddle.net domo

jQuery

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

HTML

<div class="comment more">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>
于 2013-09-30T11:58:48.857 回答