<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现单行、多行文本溢出隐藏显示省略号</title>
<style>
/* 单行文本溢出隐藏 */
/* div {
width: 100px;
background-color: antiquewhite;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} */
/* 多行行文本溢出隐藏 */
div {
width: 100px;
background-color: antiquewhite;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div>
css实现单行、多行文本溢出隐藏显示省略号
</div>
</body>
</html>
单行、多行文本溢出隐藏
最新推荐文章于 2024-10-01 23:20:42 发布