首页
> 计算机技术
> 前端开发
> Html/Css
css实现超过固定宽度显示省略号和未指定宽度的响应式显示省略号
原创 lihf8515 2025年02月12日 14:35
来源:本站 阅读:483
如何能够实现一行超长文本，自动在行尾添加省略号？我们可以分两种情况：
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;
}
换上上述代码后，就能生效了，当然，具体要根据实际情况使用其中最适合的一种方法即可。
作者
昵称：君子如兰
注册时间：2025-01-31 02:47:34
最近更新：2026-01-24 17:01:06
文章总数：94篇
原创 88篇
转载 6篇
相关文章
阅读排行榜
皖公网安备34130202000765号