Question

当我点击它时，如何调整字符串的长度？没有使整个代码复杂化。

像php中的strlen这样的东西就是解决方案。

参见：//这个

var toggleState = true;
$(document).ready(function() {
    $('.more').on("click", function() {
        if(toggleState) {
            $(this).length(unlimited characters); // This
        } else {
            $(this).length(100 characters); // This
        }
        toggleState = !toggleState;
    });
});

.length（无限制的字符）只是让你明白我的意思/我想做什么。我需要一个解决方案，不一定是长度（）;

Answer 1

为什么不尝试这样的事情，而不是依赖于任意数量的字符？

<div class="expandable">Blah blah blah blah... Lots of text here</div>
<a href="javascript:void(null);" class="expandlink">More...</a>

然后使用这个CSS：

.expandable {
    display: inline-block;
    width:90%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.expandable.expanded {
    width:auto;
    display:block;
    white-space:normal;
}

这个jQuery：

$(function() {
    $(".expandlink").click(function() {
        $(this.previousSibling.previousSibling).toggleClass("expanded");
        var t = $(this);
        t.text(t.text() == "More..." ? "Less..." : "More...");
    });
});

Here是一个证明这一点的JSFiddle。

Answer 2

您可以使用css轻松实现此目的。文本溢出：省略号并单击。

http://jsfiddle.net/nhzDR/

HTML

<span class="clsshort">This is a very long text used to check how is everythign happening.This is a very long text used to check how is everythign happening.This is a very long text used to check how is everythign happening</span>

JS

$(document).ready(function() {
    $('.clsshort').on("click", function() {
       $(this).toggleClass("clsshort");
    });
});

CSS

span.clsshort
{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    display:inline-block;
}

单击时调整字符串的长度：jQuery

2 个答案:

HTML

JS

CSS