jquery - Adjusting length of string when clicked: jQuery

Question

How do I adjust the length of a string when I've clicked on it? Without complicating the entire code.

Something like strlen in php would be the solution.

See: // This

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(unlimited characters) is just so that you understand what I mean/what I want to do. I need a solution, doesnt have to be 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...");
    });
});

这是一个演示这一点的 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;
}