单行或多行超出的内容显示省略号
<style>
/*单行显示省略号 */
p {
background-color: pink;
width: 100px;
/* 一行显示 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* ellipsis：省略号 */
text-overflow: ellipsis;
}
/* hover 的时候显示内容 */
p:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<p>123aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaafffsdssssdffffffffsdf</p>
多行省略
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 显示行数
-webkit-box-orient: vertical
多行省略 2
display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word; //允许长单词或 URL 地址换行到下一行。
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //显示行数
overflow: hidden;
