CSS中文本超出部分隐藏并用省略号代替_css 不换行超过用 ... 代替

作者：你好赵伟 | 2024-02-20 17:42:02

踩

css 不换行超过用 ... 代替

CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到，这种只需要css三行代码就可以实现

首先先写好基本的结构


<div>
<p>今天天气很好，适合出去玩耍，不要再打代码了放松一下去</p>
</div>
<style>
div{
 width:100px;
 
}
</style>

接下来见证三行代码的魅力


<div>
<p>今天天气很好，适合出去玩耍，不要再打代码了放松一下去</p>
</div>
<style>
div{
 width:100px;
 
}
 
p{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
</style>

解释一下：

white-space:nowrap 超出部分不换行

overflow:hidden 超出部分进行隐藏

text-overflow:ellipsis 超出部分用 ... 代替

注：大家还有什么办法欢迎评论区留言

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/120472?site

CSS中文本超出部分隐藏并用省略号代替_css 不换行 超过用 ... 代替

首先先写好基本的结构

接下来 见证三行代码的魅力

解释一下：

注：大家还有什么办法欢迎评论区留言

CSS中文本超出部分隐藏并用省略号代替_css 不换行超过用 ... 代替

接下来见证三行代码的魅力