当文本溢出盒子的时候显示的是省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<style type="text/css">
p{
width: 202px;height: 32px;border: 1px solid #000;
line-height: 30px;
margin: 100px auto;/*向下100px,左右居中*/
}
</style>
</head>
<body>
<p>我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<style type="text/css">
p{
width: 202px;height: 32px;border: 1px solid #000;
line-height: 30px;
margin: 100px auto;/*向下100px,左右居中*/
/*溢出隐藏*/
overflow: hidden;
/*文字变成一行显示*/
white-space: nowrap;
/*溢出时显示省略号*/
text-overflow: ellipsis;/*文本溢出时发生什么事,ellipsis省略号*/
}
</style>
</head>
<body>
<p>我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习</p>
</body>
</html>
添加text-overflow: ellipsis;属性,文本溢出时发生什么事,ellipsis省略号。但光添加这一个属性还无法实现多行文本溢出时省略号代替,还需要将多行文本排成一行显示,这时用到white-space: nowrap;属性,同时还需要溢出隐藏属性配合使用overflow: hidden;属性
若是只是单行文本实现单行文本溢出时省略号代替则加这一个属性足够了。text-overflow: ellipsis;属性,
多行文本需要这三个属性才能完成这一个效果
overflow: hidden;溢出隐藏
white-space: nowrap;文字变成一行显示
text-overflow: ellipsis; 文本溢出时发生什么事,ellipsis省略号
如果要用其他图案作为省略号则修改 text-overflow: ellipsis;中的ellipsis属性值就可以了,ellipsis本身就是圆点省略号的意思