Question

我有一个文本提交用户写的东西，我得到该文本框的javascript的文本，并在段落中显示。我有像50 chrac的段落的文本限制。如果用户写的超过50 chrac我想在45 chrac之后显示（...）。可以使用javascript吗？

这就是用户所写的段落及其超过50个chrac。

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

我想把它显示为

Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt（.....）

可以使用javascript吗？

Answer 1

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

FIDDLE

以下是你在最后一句话中删除它的方法：

FIDDLE

Answer 2

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

elem = $('p');

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

JSFiddle

Answer 3

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

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

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

Truncating long strings with CSS: feasible yet?

Answer 4

您可以设置如下全局解决方案：

<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) +' (...)');
});

Answer 5

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

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

这样，无论内容是什么，文本总是尽可能地切断到元素的末尾。这看似比看似随机的截止更好。

Answer 6

检查此jsfiddle.net domo here

<强>的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>

如何用（....）使用javascript替换额外的文本

6 个答案: