定高溢出隐藏一段文字 改变成 自适应高度显示所有文字（展开 收起功能）

想法

点击展开时，将溢出隐藏的属性去掉，高度改为自适应；点击收起时，将自适应的盒子改为定高，并溢出隐藏。 其实这个需求的本质是将定高变为自适应的过渡。

困难点

transition是不支持将一个定值变为自适应的过渡。

分析

看上去这个问题的本质是将定高变为自适应的过渡，但是其实是将定高变为定高的过渡。

为什么这么说呢，其实在HTML DOM 中有一个 scrollHeight 属性。我们先来了解一下这个属性。

      scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。

当元素不足以展示全部内容时，会出现不可视的内容区域(出现滚动条)时，这些不可视的内容也包括在scrollHeight内的。

当元素内容不要滚动条就可以容纳，则其scrollHeight 等于 clientHeight.

了解完这个属性是不是这个题目就简单了呢。

解决办法

那么只需要在原有要溢出隐藏的盒子上加一个定高 并加上溢出隐藏；

点击展开时，将高度改为这个节点的scrollHeight的值。并且加上transition过渡。

这里以uniapp APP端为例：

js:

var content = document,queryselector( #他的id);

var scrollHeight =content.scrollHeight;

content.style.height= scrollHeight + "px"

css:

transition: height 0.5s ease;

点击收起时，将高度该回去就好。并且加上transition过渡。

js:

var content = document,queryselector( #他的id);

content.style.height= " "