用 css 限制单行、多行文本显示长度

一、限制单行文本显示长度，多于部分用…代替

width:150px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

white-space: 规定段落中的文本不进行换行 参数详解
text-overflow:规定当文本溢出包含元素时发生的事情 参数详解

二、限制多行文本显示长度，多于部分用…代替

方案一
css代码：

.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

HTML代码：

<div class="box">
    美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片
</div>

效果

美国进口Culturelle康萃乐
益生菌30片儿童水果味LGG...

理解
-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性，它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
这个方案目前仅支持webkit浏览器，比较合适WebKit浏览器或移动端（移动端绝大部分是WebKit内核的浏览器）

其他方案
这里还有一些其他大佬写的多行省略解决办法，包含浏览器兼容：
黑科技：css定制多行省略
纯css实现多行文字截断