文字溢出隐藏，鼠标移入显示

.css1{
    color:#6699ff;border:1px #ff8000 dashed;
    margin-bottom:20px;
    width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    width: 20em;/*不允许出现半汉字截断*/
    color:#6699ff;border:1px #ff8000 dashed;
}
 span{  
    display: inline-block;  
    width:60px;  
    word-break: keep-all;  
    overflow: hidden;  
    text-overflow: ellipsis;  
            }  
span:hover{  
    overflow: visible;  

   }  

欢迎来到点点滴滴的博客进行技术切磋

欢迎来到点点滴滴的博客进行技术切磋欢迎来到点点滴滴的博客进行技术切磋<

 
              文字溢出效果显示与隐藏的测试