一、文本溢出处理显示省略号
1、单行文本溢出显示省略号
方法1：省略号
单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号
<style>
.box{
width:200px;
background-color:red;
height:40px;
line-height:40px;
/* 关键代码 */
text-overflow: ellipsis; /* 溢出显示省略号 */
overflow: hidden; /* 溢出隐藏 */
white-space: nowrap; /* 强制不换行 */
}
</style>
<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div>
</body>方法2：伪元素
<style>
.box {
width: 200px;
height: 40px;
line-height: 40px;
background-color: orchid;
overflow: hidden;/* 溢出隐藏 */
white-space: nowrap;/* 强制不换行 */
position: relative;/* 子绝父相 */
}
.box:after {
content: "...";
position: absolute;
right: 0px;
bottom: 0px;
/* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */
width: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
可以沉迷，可以抱怨，可以奔溃，可以抱怨，可以奔溃，人要有自愈能力
</div>
</body>2、多行文本溢出显示省略号
方法1：伪元素
<style>
.box {
width: 200px;
/* 通过行高和高度控制显示的行数 */
height: 120px;
line-height: 30px;
background-color: red;
position: relative;
/* 文本两端对齐方式 */
text-align: justify;
/* 溢出隐藏 */
overflow: hidden;
}
.box:after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
background-color: red;
width: 16px;
}
</style>
<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157</div>
</body>
方法2：弹性盒
width：200px；设置盒子的宽度(限制宽度) display：-webkit-box；将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数 -webkit-box-orient：vertical；设置或检索伸缩盒对象的子元素的排列方式
overflow：hidden；溢出隐藏
<style>
.box2 {
/* 1.设置宽度 */
width: 200px;
background-color: pink;
line-height: 30px;
/* 2.设置旧版弹性盒 */
3700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
