/* 1.先强制一行内显示文本*/ white-space : nowrap ; /*（默认 normal 自动换行）*/ /* 2．超出的部分隐藏*/ overflow : hidden ; /* 3．文字用省略号替代超出的部分 */ text-overflow : ellipsis ;
<!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>Document</title> <style> div{ width: 150px; height: 80px; background-color: skyblue; margin: 100 auto; /* 1.先强制一行内显示文本*/ white-space : nowrap ; /*（默认 normal 自动换行）*/ /* 2．超出的部分隐藏*/ overflow : hidden ; /* 3．文字用省略号替代超出的部分 */ text-overflow : ellipsis ; } </style> </head> <body> <div>阿牛是世界上最好最帅的人</div> </body> </html>
overflow : hidden ; text-overflow : ellipsis ; /*弹性伸缩盒子模型显示*/ display :-webkit-box ; /*限制在一个块元素显示的文本的行数,即在第几行显示省略号*/ -webkit-line-clamp :2; /*设置或检素伸缩盒对象的了元素的排列方式*/ -webkit-box-orient : vertical ;
<!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>Document</title> <style> div{ width: 150px; height: 45px; background-color: skyblue; margin: 100 auto; overflow : hidden ; text-overflow : ellipsis ; /*弹性伸缩盒子模型显示*/ display :-webkit-box ; /*限制在一个块元素显示的文本的行数,即在第几行显示省略号*/ -webkit-line-clamp :2; /*设置或检素伸缩盒对象的了元素的排列方式*/ -webkit-box-orient : vertical ; } </style> </head> <body> <div>阿牛是世界上最好最帅的人,啊啊啊啊啊啊啊啊啊啊啊啊</div> </body> </html>
