显示标签固定长度的文字，超出部分显示省略号，hover上去显示全部文字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style>
.demo {
display: inline-block;
width: 20em;
height: 20px;
border: 1px solid #d1d2d4;
border-radius: 4px;
line-height: 20px;
font-size: 12px;
/*关键在下面这三行*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo:hover {
height: auto;
word-break:break-all;
white-space: pre-wrap;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p class="demo" title="滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。">
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
</p>
</div>
</body>
</html>多行显示，超出部分显示省略号：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style>
.demo {
display: inline-block;
width: 20em;
border: 1px solid #d1d2d4;
border-radius: 4px;
line-height: 20px;
font-size: 12px;
/*关键代码为下面这四行，目前仅支持webkit浏览器*/
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
</head>
<body>
<p class="demo" title="滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。">
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
</p>
</body>
</html>
版权声明：本文为JohnZhongJob原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。