css实现文本溢出显示...

在网页中显示文字内容时，经常会碰到文字内容特别长的情况，那么这个时候为了使网页看起来比较美观和简洁，会对内容进行处理。下面我们就来看一看，如何使用css来对文字溢出部分增加...。

首先来看第一种情况，对单行文字处理。

<h2>单行溢出显示...</h2>

<div class="single-line">

我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本我是单行文本

</div>

页面显示的情况是这样的。

接下来，我们来写single-line的css，如下：

.single-line {
width: 500px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
}

然后，刷新页面，会发现是这样的。

第二种情况，就是对多行文本进行处理，html如下：

<h2>多行溢出显示...</h2>

<div class="multi-line">

我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本

</div>

预览结果是这样的，

然后编写，multi-line的css,

.multi-line {
width: 500px;
height: 55px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

再看，我们的目的就达到了。

ps:这种写法只支持webkit内核的浏览器。