首页
> 计算机技术
> 前端开发
> Html/Css
css实现超过固定宽度显示省略号和未指定宽度的响应式显示省略号
原创 lihf8515于2025年02月12日 14:35发表
来源:本站 阅读:93
如何能够实现一行超长文本，自动在行尾添加省略号？我们可以分两种情况：
1、常见的情况是，这行文本有固定的宽度，使用以下代码即可：
.ellipsis{
width:400px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
2、还有一种情况，是在响应式布局中遇到的，由于为了保证响应式的特性，我们不能设置显示的宽度，宽度要设置为自动宽度。这时， 我们应该怎么办？
如果，我们还生搬硬套上面第1种情况的代码，这时100%的结果就是，代码不生效，那么，就应该使用如下代码：
.ellipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
换上上述代码后，就能生效了，当然，具体要根据实际情况使用其中最适合的一种方法即可。
阅读排行榜
皖公网安备34130202000765号