单行文本溢出显示省略号.多行文本溢出显示省略号
Posted srh151219
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单行文本溢出显示省略号.多行文本溢出显示省略号相关的知识,希望对你有一定的参考价值。
单行文本溢出显示省略号
<!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>
以上是关于单行文本溢出显示省略号.多行文本溢出显示省略号的主要内容,如果未能解决你的问题,请参考以下文章