JS实现默认显示自定义字数的文字，点击按钮显示全部内容

2021 年 01 月 15 日

1415 次浏览

1424字数

### 演示

### CSS

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

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

### HTML

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

### JS

```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>
```

### 附容器内隐藏

<div class="inner-content" >
<p class="inser-title">Jquery实现超出容器限制高度自动隐藏展开</p>
<div class="inster-summary text-muted">
演示演示地址代码直接上html&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;he...
</div>
</div>
</a>

</div>

</div>

最后修改：2021 年 01 月 26 日