<p class="titleinfo_title title_hover" 
data-content=" 04 喜看稻菽千重浪--记首届国家最高科技奖获得者袁隆平 等三篇"> 
04 喜看稻菽千重浪--记首届国家最高科技奖获得者袁隆平 等三篇
</p>

强制多行显示效果：

 

<style type="text/css">.title_hover:hover::after {content: attr(data-content);position: absolute;padding: 2px;border: 1px solid #93b32f;border-radius: 5px;background: #d5ddbbf5;top: 5px;left: -80px;display: inline-block;width: calc(100% + 78px);font-size: 14px;font-weight: normal;line-height: 20px;/* 添加动画*/animation:zoomOut 0.5s;/* 强制多行显示*/height: 65px;overflow: hidden;word-wrap: break-word;word-break: break-all;white-space: normal;text-overflow: unset;}/* 设置动画效果*/@keyframes zoomOut{from {height:10px;}}
</style>

 强制单行显示效果：

 

<style type="text/css">.title_hover:hover::after {content: attr(data-content);position: absolute;padding: 2px;border: 1px solid #93b32f;border-radius: 5px;background: #d5ddbbf5;top: 5px;left: -80px;display: inline-block;width: calc(100% + 78px);font-size: 14px;font-weight: normal;line-height: 20px;/* 添加动画*/animation:zoomOut 0.5s;/* 强制单行显示 */height: 20px;overflow: hidden;word-wrap: normal;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;}/* 设置动画效果*/@keyframes zoomOut{from {height:10px;}}
</style>