css实现单行文本溢出显示省略号

1
2
3
white-space: nowrap;  		// 规定段落中的文本不进行换行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 文本溢出显示省略号

css实现多行文本溢出显示省略号

1
2
3
4
5
display: -webkit-box; 		// 设置弹性盒子模型
overflow : hidden; // 溢出隐藏
text-overflow: ellipsis; // 文本溢出显示省略号
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 属性规定框的子元素应该被水平或垂直排列。

注:因为用了webkit的私有属性,建议只在移动端使用。