SOURCE

window.onload=function(){
    // element.scrollHeight---文章内容的实际高度   element.clientHeight---文章内容的显示高度
    // element.scrollWidth---文章内容的实际宽度   element.clientWidth ---文章内容的显示宽度
    var element=document.getElementById("content")
    if(element.scrollHeight>element.clientHeight){
        element.style='overflow:hidden;'
    }else{
        document.getElementById("expand").style="display:none"
    }
    
}
function more(){
    document.getElementById("content").style='overflow:visible; white-space:normal;'
    document.getElementById("expand").style="display:none"
    document.getElementById("pack").style="display:block"
 }
 function pack(){
    document.getElementById("content").style='display:block;overflow:hidden'
    document.getElementById("expand").style="display:block"
    document.getElementById("pack").style="display:none"
}

<div style="width: 250px; position: absolute;">
    <div id="content">
        first my gaze toward the moon, but the moon shines on the ditch. “我本一心向明月，奈何明月照沟渠”
    </div>
    <a Onclick='more()' id='expand'>
        展开
    </a>
    <a Onclick='pack()' id="pack">
        收起
    </a>
</div>

#content{
   width: 150px;
   height: 25px; 
   float:left;
   overflow: auto;
   word-wrap:break-word;
   word-break: break-all;
   text-overflow:ellipsis;
   white-space:nowrap;     
}
a{
   float:right;
   margin-left: 30px;
   position: absolute;
   top: 0;
   right: 0;
}
#pack{
   display: none;
}