html中控制文本单行显示或者多行显示，多余的部分用省略号代替

html中控制文本单行显示或者多行显示，多余的部分用省略号来代替

首先是单行显示，主要css部分代码如下：

p{
	width: 300px;
	height: 40px;
	border: 1px solid #000000;
	line-height: 40px;
	white-space: nowrap;   //使文本单行显示
	text-overflow: ellipsis;  //多余的部分用省略号来代替
	overflow: hidden;      // 隐藏多余的部分
	//单行显示并且使多余的部分用省略号来代替，需要以上三个属性结合起来一起使用
}

---

文本多行显示，多余的部分用省略号来代替，例如当要显示两行的时候，代码如下：

p{
	width: 200px;
	height: 50px;
	border: 1px solid red;
	line-height: 25px;
	white-space: normal;        //使文本可以多行显示
	text-overflow: ellipsis;    //使多余的部分用省略号来代替
	overflow: hidden;           //隐藏多余的部分
	display: -webkit-box;       //浮动布局
	-webkit-line-clamp: 2;      //显示的行数
	-webkit-box-orient: vertical;   //垂直排列
}