文字超出长度显示省略号

为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。

以下是超出定宽容器显示省略号的设置方法，原理都一样。

HTML代码：

<div class="item">
   <p class="line-limit">亲，一行文字太多，显示不下，接下来的文字我要用省略号代替。我可能是超出长度被隐藏的文字</p>
</div>

CSS代码：

.item {
   background-color: #9cc9ef;
   max-width: 470px;
}
.line-limit {           
   overflow: hidden;           /*超出隐藏*/
   text-overflow: ellipsis;    /*文本隐藏部分显示为省略*/
   white-space: nowrap;        /*文本不换行，这样超出一行的部分被截取，显示...*/
}

效果截图：