-webkit-box-orient:vertical;
-webkit-line-clamp:2;
在实际项目中，我们会发现
-webkit-box-orient没有生效
，需要加入如下注释
/*! autoprefixer: off */
最终代码
：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow:hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
1. 强制一行的情况很简单overflow:hidden;//超出的隐藏text-overflow:ellipsis;//省略号white-space:nowrap;//强制一行显示 2. 如果要强制两行的话，得用到css3的知识overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-...
overflow:hidden; //
超出
的
文本
隐藏
text-overflow:ellipsis; //溢出用
省略号
显示
white-space:nowrap; //溢出不
换行
但是第三条属性，只能
显示
一行，不能用在这里，那么如果
显示
多行呢？
超出
两行
隐藏:
css3
解决了这个问题，解决方法如下：
display:-webkit-box; //将对象作为弹性伸缩盒子模型
显示
。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是
css
的规范属性，需要组
在页面
显示
中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用
css
轻松做到。
单行
文字
的省略
单行
文字
省略比较简单。关键代码如下：
<style>
.single {
width: 280px;
text-overflow: ellipsis...
可以使用
CSS
的 `text-overflow` 属性来实现
超出
部分
显示
省略号
的效果。
首先，要确保
文本
内容被限制在一个区域内，可以使用 `overflow: hidden` 和 `white-space: nowrap` 属性将
文本
内容放在一行内，同时隐藏
超出
部分：
```
css
.ellipsis {
overflow: hidden;
white-space: nowrap;
然后，使用 `text-overflow: ellipsis` 属性就可以将
超出
部分
显示
为
省略号
：
```
css
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
如果想要限制
文本
内容的行数，可以使用 `line-clamp` 属性。注意，这个属性并不是标准的
CSS
属性，目前只有 Chrome 和 Safari 浏览器支持。
例如，如果想要将
文本
内容限制在
两行
内，可以这样写：
```
css
.ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
