<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>

?