[前端学习]CSS 设置文字只显示一行，多余显示省略号

在设计网站列表页面的时候，经常会遇到当两篇文章标题行数不相同时，显得页面非常不协调的感觉吧。

css就可以实现网站列表页中的标题统一显示几行，多余文字神略号代替。

让标题文字只显示一行，多余省略号代替

.title{
  display: inline-block;//设置inline-block属相
  white-space: nowrap; //强制不换行
  width: 100%; //固定高度
  overflow: hidden;//隐藏超出部分
  text-overflow:ellipsis;//显示“……”
}

  .title{
	width:200px;
	word-break:break-all;
	display:-webkit-box;//溢出用省略号显示
	-webkit-line-clamp:2;//显示2行文字
	-webkit-box-orient:vertical;//超出的文本隐藏
	overflow:hidden;
}