如何让多文本内容只显示一行，其余用省略号来显示

Posted 2020-08-24 明明一颗大白菜

在此需要用到三个属性配合使用：

overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分省略号显示*/

实例：
<p>

兴高采烈的破蛹 重获新生的冲动 寻找爱情世界 美梦
　　既然不是毛毛虫 就要壮烈的扑火 短暂青春要像 烟火

</p>

css代码：
<style>

*{
    margin: 0;
    padding: 0;
}

p{
    width: 100px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

效果如下：

 

</style>