前端

单行文字溢出隐藏并加省略号

时间：2020-02-08 17:29:50 来源：chqqws.com 作者：陈清泉

简介：此方法一般应用于标题，比较简单，备忘

IE8测试可用，效果如上图：

css部分： <style>
div{border:1px solid #ccc;width:300px;padding:0 10px;}
p{
   width:100%;
   white-space: nowrap;/*规定段落中的文本不进行换行*/
   text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
   overflow: hidden;}
</style>

html部分： <div>
<p>单行文字溢出隐藏并加省略号DEMO。单行文字溢出隐藏并加省略号DEMO。单行文字溢出隐藏并加省略号DEMO。</p>
</div>