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 超出部分用 ... 代替

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