min-width
.center {
min- 200px;
overflow: hidden;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
flex:1
设置元素为flex:1;
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<style>
.flex {
display: flex;
100%;
}
.flex > div {
height: 100px;
line-height: 100px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="flex">
<div>续犯驻雨绝针鲁渗召语添叫罪宅炉翠例济愧汇场论悄出入纸某览竟区</div>
<div>续犯驻雨绝针鲁渗召语添叫罪宅炉翠例济愧汇场论悄出入纸某览竟区</div>
<div>续犯驻雨绝针鲁渗召语添叫罪宅炉翠例济愧汇场论悄出入纸某览竟区</div>
</div>
<script src="" async defer></script>
</body>
</html>
再嵌套一个元素
.center {
overflow: hidden;
flex: 1;
}
.center > div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
总结：多层的时候需要检查每一次的元素是否有宽度，没有就需要设置，否则就只有设置元素为的min-width才会显示点点。