本文介绍了使用CSS处理单行文本溢出时显示省略号的两种常见方法。方法1通过结合`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性实现。方法2利用伪元素`::after`添加省略号，并通过调整其位置覆盖多余文本。这两种方法都可以有效地在有限的空间内展示文本内容。
一、文本溢出处理显示省略号
1、单行文本溢出显示省略号
方法1：省略号
单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellip
<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>
sis；文本溢出的显示省略号
<style>
方法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>
扫一扫
3330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
