文字超过两行省略

今天遇见一个问题就是要对文字超过两行进行省略，并进行弹窗
换行代码

			overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

对应换行弹窗代码

css 
.content{
            float: left;
            margin: 50px 50%;
            transform: translateX(-50%);
            width: 60%;
            height: auto;
            background: #666;
            border-radius: 10px;
 }
 .content span{
            display: inline-block;
            width: 8%;
            margin: 20px 17px;
            position: relative;
            height: 43px;
 }
.topContent {
            position: absolute;
            top: -80%;
            left: 50%;
            background: #fff;
            color: #000;
            z-index: 900;
            border-radius: 5px;
}
html
<div class="content">
	<span>
          <p>大数据大数4124124124据</p>
    </span>
</div>
js
//弹窗方法
let content = document.getElementsByClassName("content")
      for(let i = 0; i < content[0].children.length; i++){
          let child = content[0].children[i]
          if(child.scrollHeight > child.clientHeight){
              console.log(1)
              child.children[0].classList.add("ellipsis")
              console.log(child.classList)
              let div = document.createElement("div")//创建弹窗
              child.children[0].onmouseover = function(){
                  child.appendChild(div)
                  div.textContent = this.textContent
                  div.classList.add('topContent')
              }
              child.children[0].onmouseout = function(){
                  child.removeChild(div)
              }
          }
}

并未对样式进行细细琢磨，有什么问题，可以共同探讨