解決：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>