【CSS】文本超过行数显示“展开”、“收起”

使用css样式控制文本超过行数显示“展开”、“收起”

css代码如下：

 .container {
          width: 800px;
          position: relative;
          padding-bottom: 20px;
        }
        .content {
            overflow: hidden;
            line-height: 1;
            /* 最多展示几行就(n*line-height)em， */
            height: 3em; 
            background: yellow;
        }
        .more{
            position: absolute;
            bottom: 0;
            right: 0;
            background: blue;
            color: white;
        }
        .more::after{
            content: '展开';
        }
        .check{
            display: none;
        }
        .check:checked ~ .content{
           height: auto;
        }
        .check:checked ~ .more::after{
            content: '收起';
        }

html代码如下：

 <div class="container">
    <input class="check" type="checkbox" id="check">
    <label class="more" for="check"></label>
    <div class="content">中国专业IT社区**** (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
旗下拥有：专业的中文IT技术社区： ；移动端开发者专属APP： **** APP、****学院APP；新媒体矩阵微信公众号：****资讯、程序人生、GitChat、****学院、AI科技大本营、区块链大本营、****云计算、GitChat精品课、人工智能头条、****企业招聘；IT技术培训学习平台： ****学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。 [1]</div>
    </div>

checkbox: 根据是否选中的状态判断对应的展示状态，并控制内容高度
label: 控制checkbox，使用伪元素更好展示对应文字

ps: 如果使用vue循环，content内部写成多个item的div也可以正常使用
如html代码如下：

<div class="content">
   <div>
   	中国专业IT社区**** (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
  </div>
  <div>
  	旗下拥有：专业的中文IT技术社区：；移动端开发者专属APP： **** APP、****学院APP；
  </div>
  <div>
  	新媒体矩阵微信公众号：****资讯、程序人生、GitChat、****学院、AI科技大本营、区块链大本营、****云计算、GitChat精品课、人工智能头条、****企业招聘
  </div>
  <div>
  	IT技术培训学习平台： ****学院； 
  </div>
  <div> 
  	技术知识移动社区： GitChat；
  </div>
  <div>
  	IT人力资源服务：科锐福克斯；
  </div>
  <div>
  	高校IT技术学习成长平台：高校俱乐部。 [1]
  </div>
</div>