truncate text with line clamp allow a certain number of lines

HTML

<div class='demo-box line-clamp--three'>This box should be truncated to three lines using the class line-clamp--three</div>
<div class='demo-box line-clamp--four'>This box should be truncated to four lines using the class line-clamp--four</div>

CSS

.demo-box {
	width:200px;
  	background:#444;
  	color:#FFF;
  	border-radius:10px;
  	margin-bottom:20px;
  	font-size:22px;
  	border:20px solid transparent;
  	overflow: hidden;
}

.line-clamp--three {
  -webkit-line-clamp: 3;
  line-clamp:3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.line-clamp--four {
  -webkit-line-clamp: 4;
  line-clamp:4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}