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>