css3解决了这个问题，解决方法如下：
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
最后的css样式如下：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
今天做东西，遇到了这个问题，百度后总结得到了这个结果。首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
前段时间在公司移动站的重构，遇到了一个产品列表title的需求是只
显示
两行
，然后超过
两行
的字符用
省略号
显示
。如下图的效果，当时第一感觉是这个需求只能通过后台输出的时候截取字符去处理，或者通过JS计算字符来处理，因为样式无法控制换
行
文本
出现省略，但是因为我们新版的移动站是流式布局，在不同分辨率下的手机换
行
的宽度是不确定的，所以就没有标准的字符截取的数量范围。例如：15个字在iphone上面是
两行
显示
，但是在三星上就可能不是
两行
显示
了，有可能值
显示
一
行
，又或者在分辨率更低的手机15字已经是三
行
显示
了，遇到了这种场景就很头痛了。先来回顾下，单
行
文本
换
行
的写法：
复制代码代码如下:A20 Banana
overflow:hidden; //
超出
的
文本
隐藏
text-overflow:ellipsis; //溢出用
省略号
显示
white-space:nowrap; //溢出不换
行
但是第三条属性，只能
显示
一
行
，不能用在这里，那么如果
显示
多
行
呢？
超出
两行
隐藏
:
css3
解决了这个问题，解决方法如下：
display:-webkit-box; //将对象作为弹性伸缩盒子模型
显示
。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是
css
的规范属性，需要组
word-wrap: break-word; /*强制换
行
*/
overflow: hidden; /*
超出
隐藏
*/
text-overflow: ellipsis;/*
隐藏
后添加
省略号
*/
white-space: nowrap;/*强制不换
行
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;//当属性值为3，表示
超出
3
行
隐藏
de...
复制代码代码如下:<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><title>HTML5标签</title><style>p{/**white-space：nowrap;表示
文本
不会换
行
，在同一
行
继续，知道遇到标签为止；overflow：hidden;不
显示
超过对象尺寸的内容，就是把
超出
的部分
隐藏
了；text-overflow：ellipsis;当
文本
对象溢出是
显示
…，当然也可是设置属性为clip不
显示
点点点；-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd
一、中文
超出
了会默认换
行
，但是对于英文或者数字来说
超出
不换
行
，要加上word-wrap: break-word;
word-break: break-all;二、文字
超出
...表示display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
