文本语出显示省略号

文本溢出显示省略号相关知识点： 一、单行文本溢出显示省略号的步骤： 1.设置宽度：width: 200px; height: 200px; border: 1px solid red; 2.单行-强制文本不换行：white-space: nowrap; 3.让文本溢出隐藏：overflow: hidden; 4.溢出显示省略号：text-overflow: ellipsis; 二、用伪元素实现单行文本溢出显示省略号 1.设置宽度：width: 200px; height: 200px; border: 1px solid red; 2.单行-强制文本不换行：white-space: nowrap; 3.让文本溢出隐藏：overflow: hidden; 4.用伪元素实现单行文本溢出显示省略号： .box::after{ content: '...'; position: absolute; right: 0; bottom: 0; /* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */ width: 20px; background-color: red; } 三、用伪元素实现多行文本溢出显示省略号 .box{ /* 1.设置宽度 */ width: 200px; /* 2.通过高度和行高来控制显示行数 */ line-height: 30px; height: 90px; background-color: blueviolet; /* 3.溢出隐藏 */ overflow: hidden; /* 子绝父相 */ position: relative; } /* 4.通过伪元素实现 */ .box::after { content: '...'; position: absolute; right: 0; bottom: 0; /* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */ width: 16px; background-color: pink; } 四、用弹性盒实现多行文本溢出显示省略号 width：200px；设置盒子的宽度(限制宽度)​ display：-webkit-box；将盒子作为弹性盒显示​ -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数​ -webkit-box-orient：vertical；设置盒子子元素的排列方式​ overflow：hidden；溢出隐藏 步骤： .box{ /* 1.设置宽度和行高 */ width: 200px; line-height: 30px; background-color: cadetblue; color: chartreuse; /* 2.设置弹性盒 */ display: -webkit-box; /* 3. 设置行数*/ -webkit-line-clamp: 3; /* 4.设置子元素的排列方式 */ /* vertical排列方式为垂直排列 */ -webkit-box-orient: vertical; /* 5.设置溢出隐藏 */ /* overflow: hidde、n;