html5怎么实现隐藏剩余显示内容

.hiddenMemo{
width:100px;    
  white-space:nowrap;    
  overflow: hidden;    
  text-overflow: ellipsis;
}

.hiddenMemo {      
width:50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -WEBkit-box;           
  -webkit-line-clamp: 2;          
  -webkit-box-orient: vertical;     
}

<div class='hiddenMemo' 
title='鼠标悬停在文本上时就会显示title的属性值'>
超过宽度限制就会隐藏的文本内容
</div>

<h2>举个栗子吧</h2>
<div class='hiddenMemo' 
title='我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。'>
我叫李华，今年18岁，你的外国朋友Petter要来中国北京，请你给他介绍一下北京。
</div>