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