CSS实现单行，多行文本溢出显示省略号

转自轻轻简记
http://www.qingqingjianji.com/article.html?aid=42
业务场景：

在单行新闻或公告消息，多行简介中我们经常可以看到超出的文本会以省略号显示，那么怎么用CSS实现呢

效果：

实现方法：

单行文本：

<div class="note-box">

<a href="#">这是一条公告消息，这个标题比较长，比较长，比较长，比较长</a>

</div>

.note-box{

 margin: 30px auto;

 width: 30%;

 height: 40px;

 line-height: 40px;

 overflow: hidden;

 text-overflow:ellipsis;

 white-space: nowrap;

}

.note-box a{

 text-decoration: none;

 font-size: 14px;

 color: #333;

 cursor: pointer;

}

多行文本：

<div class="note-box">

<p>这是简介，简介的内容比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长，比较长</p>

</div>

.note-box{

margin: 30px auto;

width: 150px; 

height: 52px;

line-height: 26px;

text-overflow:ellipsis;

word-break: break-all;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

}

补充：

-webkit-box;存在兼容性问题，如果是PC端，最好还是用js处理