CSS实现文本溢出，隐藏超出文本并显示省略号
程序员文章站
2022-04-22 14:44:06
...
目录
单行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style type="text/css">
.one{
width: 100px;
background:green;
color: #fff;
/*下面为主要部分*/
overflow: hidden;/*文本溢出隐藏*/
text-overflow:ellipsis;/*文本溢出显示省略号*/
white-space:nowrap;/*文本不会换行（单行文本溢出）*/
}
</style>
</head>
<body>
<div class="one">单行文本溢出aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>多行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
<style type="text/css">
.two{
width: 100px;
background:blue;
color: #fff;
/*下面为主要部分*/
line-height: 24px;
max-height: 48px;
overflow: hidden;
text-overflow:ellipsis;/*文本溢出显示省略号*/
display:-webkit-box;/* 定义为盒子模型显示 */
-webkit-box-orient:vertical;/* 定义为竖向编排显示 */
-webkit-line-clamp:2;/* 限制一个块元素显示的文本行数*/
}
</style>
</head>
<body>
<div class="two">多行文本溢出多行文本溢出。</div>
</body>
</html>