演示

演示地址

CSS

.teste {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 200px;
}

.teste a {
    padding-left: 15px;
}

HTML

<div class="teste">
    <span>这是一串填充字符，句子是语言运用的基本单位，它由词、词组(短语)构成，能表达一个完整的意思，如告诉别人一件事情，提出一个问题，表示要求或者制止，表示某种感慨，表示对一段话的延续或省略。句子和句子中间有比较大停顿。它的结尾应该用上句号、问号、省略号、或感叹号，句子是语言运用的基本单位，它由词、词组(短语)构成，能表达一个完整的意思，如告诉别人一件事情，提出一个问题，表示要求或者制止，表示某种感慨，表示对一段话的延续或省略。句子和句子中间有比较大停顿。它的结尾应该用上句号、问号、省略号、或感叹号</span>
</div>

JS

<script>
    function Str_text() {
        var a = document.querySelectorAll("div[class='teste']");
        for (i = 0; i < a.length; i++) {
            init(a[i]);
        }
    }
    Str_text();

    function init(ctn) {
        var len = 200; //默认显示字数
        var content = ctn.innerHTML; //获取div里的内容

        //alert(content);
        var span = document.createElement("span"); //创建<span>元素
        var a = document.createElement("a"); //创建<a>元素
        span.innerHTML = content.substring(0, len); //span里的内容为content的前len个字符

        a.innerHTML = content.length > len ? "... 展开" : "";
        //判断显示的字数是否大于默认显示的字数 来设置a的显示
        a.href = "javascript:void(0)"; //让a链接点击不跳转

        a.onclick = function() {
                if (a.innerHTML.indexOf("展开") > 0) { //如果a中含有"展开"则显示"收起"
                    a.innerHTML = "<< 收起";
                    span.innerHTML = content;
                } else {
                    a.innerHTML = "... 展开";
                    span.innerHTML = content.substring(0, len);
                }
            }
            // 设置div内容为空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
    }
</script>

附容器内隐藏