css 文字超出隐藏显示三个点 鼠标移入以浮窗形式显示完整内容

1. 单行显示隐藏

文字超出后隐藏，显示三个点

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

<div class="p">创造有价值的东西就是创造财富。最好先搞清楚什么是财富。财富与金钱并不是同义词</div>

样式：
.p{
 width:1rem;
 overflow:hidden;//超出部分隐藏
 white-space:nowrap;//禁止换行
 text-overflow:ellipsis//省略号
}

2. 多行隐藏

//必须结合的属性，将对象作为弹性伸缩盒对象的子元素的排列仿古式
	 display:-webkit-box;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	-webkit-line-clamp:4;//例如超过4行显示省略号
	overflow:hidden;

<div  class="p">创造有价值的东西就是创造财富。最好先搞清楚什么是财富。财富与金钱并不是同义词。财富存在的时间与历史一样长久，甚至更长久，事实上蚂蚁也拥有财富。金钱是一种历史相对较短的发明。</div>
样式：
.p{
  width:1rem;
  height:0.4rem;//需要设置高度
  //必须结合的属性，将对象作为弹性伸缩盒对象的子元素的排列仿古式
  display:-webkit-box;
  -webkit-box-orient:vertical;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;//例如超过2行显示省略号
  overflow:hidden;
}