解决：flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突
解决：flex弹性布局和溢出隐藏使用ellipsis省略号提示的冲突
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/*下面文字使用了弹性布局绝对居中，所以中间的文字显示，两边的问题隐藏*/
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
h2{
width: 100px;
height: 50px;
font-size: 30px;
line-height: 50px;
background: #fef;
color: #f00;
margin: auto;
overflow: hidden;
}
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<!-- 解决flex布局和溢出隐藏省略号提示的问题：没有什么是一个嵌套解决不了的问题： -->
<!-- 问题解析：把flex布局和ellipsis溢出隐藏省略号代替放在一个容器内就会发生冲突。 -->
<!-- 解决办法：把flex布局和ellipsis溢出隐藏省略号分别放在两个容器内，立马解决问题。 -->
<h2 class="flex-center ellipsis">我啊你就像老鼠的凤山街道</h2>
<h2 class="flex-center "><span class="ellipsis">我啊你就像老鼠的凤山街道</span></h2>
</body>
</html>