css元素溢出省略号隐藏和鼠标移入显示

纯css代码，大致思路，给父元素定宽，元素溢出后隐藏，并且不换行，…显示；代码如下：

.container{width: 100px;border: 1px solid skyblue;box-shadow: 2px 2px 5px black;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}

然后当鼠标移入到子元素后显示该隐藏的元素内容

.containerChildern{overflow: visible;color: red;}