单行文本溢出显示省略号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px; background: rgb(211, 128, 128); /* 设置文字在一行显示不能换行 */ white-space: nowrap; /* 超出限定的宽度就隐藏内容 */ overflow: hidden; /* 当文本溢出时显示省略符号来代表被修剪的文本 */ text-overflow: ellipsis; } </style> </head> <body> <div class="box"> 啦啦啦啦啦啦啦啦啦啦拉啊啦啦啦啦啦啦啦 </div> </body> </html>
多行文本溢出显示省略号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 100px; font-size: 16px; line-height: 32px; /* 如果设置高度，则设置为行高的整数倍 */ height: 96px; background: rgb(218, 182, 182); /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 3; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 */ -webkit-box-orient: vertical; /* 超出限定的高度就隐藏内容 */ overflow: hidden; /* 当文本溢出时显示省略符号来代表被修剪的文本 */ text-overflow: ellipsis; } </style> </head> <body> <div class="box"> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦拉啊啦啦啦啦啦啦啦 </div> </body> </html>
